10 Recommended GitHub Repos for Motion on the Web

GitHub is a great place to find projects that are freely distributed to the public, but have you ever starred a repo only to forget how cool and useful it could be? In this article I’ll bring to light some fantastic projects freely available on GItHub that have a strong focus on helping animators building motion for the web.

10 Recommended GitHub Repos for Motion on the Web

1. Rellax

Rellax is a buttery smooth, super lightweight, parallax library that also works across various devices. Without writing tons of code you can learn how to make a smooth scrolling experience for your project and fully understand the ins and outs of what makes parallax what it is.

10 Recommended GitHub Repos for Motion on the Web

2.Dynamics.js

If you’re into creating more life-like physics-based motion for your work look no further than dynamics.js.

10 Recommended GitHub Repos for Motion on the Web

With it, you can animate CSS properties of any DOM element, SVG properties and JavaScript objects. Not only will this library test your JS prowess, but you’ll also learn how physics makes for a more intuitive and life-like experience for users.

The sliders on its homepage really help you to understand how each property works in conjunction with its peers to create physics-based motions which reflect our real world movements.

3.Barba.js

Create stunning, fluid and smooth transitions between your website’s pages. Barba.js is a small (4kb minified and gzipped), flexible and dependency-free library which helps take your website’s UX to the next level.

10 Recommended GitHub Repos for Motion on the Web

It’s also a lesson in how PJAX (push state AJAX) and the Push State API can be used to enhance page transitions. If you’ve never heard of these technologies it’s a great introduction to them that, in the end, results in a very slick effect for page traversing.

Tip: take a look at this tutorial for more on Push State:

  • 10 Recommended GitHub Repos for Motion on the Web

    Lovely, Smooth Page Transitions With the History Web API

    In this tutorial we’re going to build a website whose pages transition smoothly, without the usual aggressive page refresh. To achieve this we’ll use the…

4.Wick

Wick  is the internet’s free and open source multimedia creation toolkit. It’s a browser-based hybrid animation and coding environment for crafting interactivity for the web. Heavily inspired by tools such as Flash (keyframe-based animations anyone?), HyperCard, and Scratch, it was developed in response to a growing need for such a tool with the modern web.

10 Recommended GitHub Repos for Motion on the Web

Create smooth motion using the browser as your guide, without downloading any additional software to get the job done.

5.Bounce.js

Create beautiful CSS3 powered animations in no time. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you’d like your application to generate these on the fly, you can use the Bounce.js library.

10 Recommended GitHub Repos for Motion on the Web

The keyframe output is definitely intriguing, and insightful into the use of the matrix() CSS function and keyframe building. This is a great tool to really fine-tune a specific motion and understand how keyframes can be used to create stunning bounce-esque movements. There is also a great Medium article, written by its creator Joel Besada, on reducing the amount of keyframes generated, why this is something worth striving for, and a fascinating look into easing.

Note: at present time Bounce is no longer under active development with no plans for future development according to Joel.

6.Anime

Anime is a lightweight JavaScript animation library. It works with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

10 Recommended GitHub Repos for Motion on the Web

This is a wonderful library for getting a grasp on how to construct and learn about timeline-based movements, starting animations at certain values, complicated keyframe animations, defining starting times relative to a previous animations duration, building playback controls and so much more.

I highly suggest giving it a run through and if you desire even more there are plenty of demos on CodePen as well.

7.Wait! Animate

I love this one. Wait! Animate provides an easy way to calculate keyframe percentages so that you can insert a delay between each animation iteration.

10 Recommended GitHub Repos for Motion on the Web

There is a config tool to add waits to your own animations without the need for JavaScript, since CSS doesn’t provide an easy way to pause an animation before it loops around again; animation-delay simply denotes a delay at the very start of the animation.

You can even customize your timing, duration and movement direction in order to fine tune your desired movement. This is a really fun way to learn about motion and gives you feedback for your settings in real-time.

8.MoJS

MoJS is a “motion graphics tool belt for the web”. It allows you to create silky smooth animations and effects for a staggering user experience. There is even an option to create a custom build for your current project’s needs; so long large file size overheads!

10 Recommended GitHub Repos for Motion on the Web

There are plenty of demos to dive into and listed on GitHub. Learn to create some really captivating motion effects like my favorite the “Bubble Layout”, word revealing, dust trails and other effects like “burst”, plus much more. If you want to learn how to create complicated and intricate effects look no further, because MoJS has your back.

  • 10 Recommended GitHub Repos for Motion on the Web

    Introduction to MoJs: Motion For the Web

    In this screencast I’m going to explain how to get started with MoJs (mo.js); a JavaScript library for creating web-based motion graphics.

9.Spirit

Another ghost.. Spirit is a superb animation tool for the web (the app can be found here); jump in and animate objects using a visual timeline. I just know this one is going to be awesome!

10 Recommended GitHub Repos for Motion on the Web

Spirit will change the way you create animations for the web. You are given full timeline control, the ability to inspect animations and an easy to learn and understand API. It’s an intuitive and simple way to comprehend building animations without the large overhead of learning complicated software.

10.ScrollReveal

ScrollReveal gives you easy scroll animations for the web. And its lightweight too; aside from having zero dependencies, the library is 3.3KB minified and Gzipped.

10 Recommended GitHub Repos for Motion on the Web

Get your feet wet with interval-based sequence animations that can be configured to load asynchronously. ScrollReveal also supports 3d rotation out of the box and that means you can get your 3D learn on and really get creative without having to grok the underlying scroll functionality and mechanics.

Parting Thoughts

Do you have some more open-source repos I missed? Have you used any of the projects listed for this article? Leave a comment and link below! I hope at least one of these examples can be of use in your daily work. Happy coding!