Advertisement
  1. Web Design
  2. Animation
Webdesign

10 Recommended GitHub Repos for Motion on the Web

by
Length:ShortLanguages:

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.

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.

2. Dynamics.js

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

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. 

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:

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.

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. 

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. 

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. 

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! 

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.

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! 

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. 

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.