There’s a lot you can do using the built-in callback and control functions. For instance, you can play, pause, control, reverse and trigger events in sync. To see what else is possible using this library, you can visit Codepen.
Velocity.js combines the best of jQuery and CSS transitions. It rates close to 17K stars on GitHub and boasts of prominent users like WhatsApp and Mailchimp. Looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration, all form part of the features.
You can use Velocity.js to scroll browser windows. It can work both with jQuery loaded in your browser and independent of it, and even undo previous animations.
Popmotion weighs only 11.7kB, but packs a punch nevertheless. It features animations like keyframes, decay, timeline for synchronizing multiple instances and more. You can stagger any series of animations or functions, as well as use pure functions to compose your own configurations.
There’s a ton of documentation to help you, and once you get past the learning curve, there’s not much you cannot accomplish using this library. Firstly, using the Three.js editor, you create a scene. Thereafter, you get to add geometrical figures, and adjust lighting and camera. The material, texture, object, color and fogging can all be tweaked, and the final file published to your project.
5. GreenSock JS
GSAP actions include creating animations on Canvas and animating any object in a scene. Also progressively revealing, morphing or moving any object along a path. For this purpose, it works with a bunch of software applications like SVGPlugins, PixiPlugin, WebGL, Adobe Animate and EaseJS. Its modular structure helps you choose just the functions you need. With 8 million users and 10K+ stars on GitHub, this powerful library has a lot going for it.
On GitHub, AniJS rates more than 3.5K stars. It does not rely on any third-party library and generally helps to speed up development. It works just as well on Android and iOS, and also in all the popular browsers.
Motion graphics has a big part to play in animations, and Mo.js is one option with which you can make an impact. With a number of tutorials and demos to help out, beginners may not find it hard to create geometrical shapes and time animations to the dot.
The APIs may appear simple, but there’s a lot you can do with them. Within the toolkit, you’ll find a Curve Editor and Timeline Editor to help you build your animations, as well as a Player to control your animations. There are different modules for staggering, easing, timeline and more. All this earns Mo.js close to 16K stars on GitHub.
If you wish to mimic a pen drawing on a screen in real-time, you’ll hit the mark with Vivus. It lets you animate SVGs giving the impression of being drawn. Since it has no dependencies, it’s fast and lightweight.
If you wish to animate your web elements as they scroll into view, ScrollReveal won’t disappoint. This easy to learn animation library has zero dependencies and 18.5K+ stars on GitHub.
ScrollReveal supports different types of effects and works well with web and mobile browsers. It intentionally works with a bare-bones configuration, so you can use it as a canvas for your creativity. To maximize the effect of the animations, the creators advise that you use it sparingly.
Typed.js is a simple library (more of a plugin, really) to animate typing on your screen. Once you enter any string, a visitor can watch it being typed at a set speed. Not only that, you can work the backspace button, as well as begin a new sentence. If you wish to allow visitors with JS disabled to also view it, you simply need to place an HTML div on the page. That way, bots and search engines also get to view the typed words.
This library rates 9.5K+ stars on GitHub. Power users include Slack and Envato.
11. Lottie by AirBnB
Lottie is a lightweight animated graphics format that balances high quality graphics against the cost of rendering them. It makes applications smaller and includes dynamic features. It can be used for web, Android, iOS and IoTs, without the need for additional software.
Don’t forget to join our crash course on speeding up your WordPress site. With some simple fixes, you can reduce your loading time by even 50-80%:
Layout and presentation by Karol K.