You may have noticed that animation is pretty popular on the web. There’s no shortage of tutorials, case studies, and libraries targeting motion lovers. It’s a facet of development that can intrigue, enhance, delight, motivate, and impress users.
In this article, I’ve chosen five JavaScript animation libraries and dissected their abilities to perform from both a business and a development perspective.
Instead of asking, “What do I use to build X?” I explore concerns like:
Additional aspects examined that help provide solutions towards project and business objectives such as:
These details help a business and team arrive at an educated decision that, hopefully, meets everyone’s needs.
An animation library is a toolset that creates an animation, and explicitly allows for custom support and creation.
These libraries must also provide methods to animate objects, tooling to allow the control of an object(s) motion, and directional control for starters. It can also come in flavors that cater to specific abilities such as reactiveÂą animations.
Since my grading scale towards each library is subjective, your opinion may differ from mine. If a library works for you, your project, and your business goals, that is what really matters. Let’s get started.
Documentation: B+, Features: A, Syntax: B+, Community & Support: A+, Stability: A
GreenSock (GSAP) is one of the premiere JavaScript libraries for web animators. You can create all kinds of stunning effects including those that require SVG support.
The primary aspects of GreenSock are open source, allowing you to use TweenMax (113 KB minified), TimelineLite (12.6 KB minified), TimelineMax (20.4 KB minified), and TweenLite (27.5 KB minified) freely, plus meet a wide range of needs without the overhead cost. If you have concerns with regards to file size make sure to read this article titled “Kilobyte Conundrum.”
There’s also an array of handy plugins to help extend GSAP capabilities such as:
Add-ons like Draggable and SplitText are available as well to complement the multitude of plugins at your disposal. Here’s the entire list of GreenSock’s product line for further investigation.
See the Pen
All Devices in SVG by Chris Gannon (@chrisgannon)
on CodePen.
In terms of ubiquity, GSAP is used on roughly 4,000,000 sites and has been around for a very long time. That means…
Overall, the GreenSock community is quite active. There are a plethora of demos, articles, and tutorials available and the community is active in Slack workspaces such as Animation At Work, Stack Overflow, members forum, and Twitter. Documentation is well written, and the syntax is easily digestible and expressive. Some portions of GSAP as mentioned are open source while plugins and utilities will be at a cost.
If you do motion work and desire a library that covers many different needs, provides solid community support, provides well-written documentation with an easy to read syntax, and always stays up-to-date; GreenSock is a great choice all around.
Building for dynamic situations with GSAP can certainly be accomplished using a ticker or ModifiersPlugin should you need that type of capability in your project.
Here are some additional examples that showcase dynamic motion using GSAP:
Documentation: C, Features: B, Syntax: B, Community & Support: C, Stability:B
Anime is a lightweight (6.2 KB minified), open source JavaScript animation library.
It works with CSS Properties, individual CSS transforms, SVG, or any DOM attributes, and JavaScript Objects. Its notable features are keyframes with the ability to chain, timeline methods to synchronize multiple instances together, playback controls, individual CSS transform control, individual values for multiple animation targets, SVG paths/lines/morphing and plenty of easing functions.
Its syntax will be familiar including the approach on chaining that’s used in many animation libraries today. Timelines are also easy to instantiate, and controlling properties using an object literal approach is another familiar cowpath.
With a public release date of June 27, 2016, it’s a project that’s certainly in its infancy. However, Anime is under active development according to GitHub pull requests (a good thing). For community support, I suggest using the project’s issue tracker before heading into Stack Overflow for the best chance at quick support.
See the Pen
Anime.js by DroidPinkman (@dennisgaebel)
on CodePen.
When it comes to documentation, be prepared to read code. Anime’s documentation makes comprehension challenging as it lacks explanations to compliment demos. I also found event control lacking the kind of sophistication you normally see with other libraries.
Browser support is very good with IE10–11 and Edge included as benchmark tests. However, nothing is noted for iOS or Android. There’s a stress test that’s also available and built to showcase performance.
If you need a library that is small in file size, works great with simple timeline sequences, works with SVG (stroke, morphing, transforms etc.), is 100 percent open source, and has a familiar syntax, then Anime is for you.
Documentation: C, Features: B, Syntax: B, Community & Support: C, Stability: C
Mo.js is is an open source project that can be installed via npm or CDNJS. It claims to be fast, reliable, unit-tested, modular, robust, and has a simple API — all to help diminish large file sizes overheads.
I found the docs to be slightly confusing.They don’t always contain explanations for methods used in other demos so you’ll have to look hard to find an answer that fits your needs. I also struggled to find a use regarding simple motion work (some facets of this project aren’t clear in terms of how to do common animation tasks). There are certainly some really cool effects though that you can make with Mo.js such as this bubble layout:
See the Pen
·•● Bubble • Layout ●•· by LegoMushroom (@sol0mka)
on CodePen.
Upon examination of the GitHub repo this project doesn’t contain many contributors, and updates have not been issued in any recent time. The project’s most recent commits range between mid-2016 and mid-2017, but hasn’t seen much action since.
I’ve been told by reliable sources that this library has been stagnant due to the busy life of its creator, so the future of this library is very open-ended. I would suggest steering away from it as support will be bleak, the community is small, and the future direction of the library is uncertain.
Documentation: D, Features: C, Syntax: C, Community & Support: B, Stability: B
Popmotion is an 11.5 KB Swiss Army knife for animators aiming to be lego blocks, and comes with packages for blend, draggable, pose, react, and spinnable. A functional, reactive JavaScript motion library that provides methods for tweening however, documentation can be a struggle to decipher; styler is specifically hard to wrap your head around due to the vague and brief explanation.
You should also be comfortable writing in ES6 as all demos, and code examples are written in this fashion. The overall syntax of this library is certainly confusing, and wording for documentation is complex, requiring a deep understanding of the project inside and out. Since you’ll most likely require a strong understanding of how this library is written it could take some time to pick up if you’re in a hurry.
See the Pen
Stacked card scrolling by Popmotion (@popmotion)
on CodePen.
See the Pen
Pose: Tooltip FLIP by Popmotion (@popmotion)
on CodePen.
Popmotion’s creator is hoping work on Pose will address my primary concerns by providing a declarative, DOM-specific layer that should make animation super-simple. Popmotion certainly has capabilities when it comes to reactive animations based on mouse position, and anything not duration based.
See the Pen
Pose SVG line animation by Popmotion (@popmotion)
on CodePen.
A good majority of developers will find the learning curve demanding. In theory it sounds nice, but when you actually start trying to write code, it’s surprisingly cumbersome and requires writing many aspects by hand.
If you need support, feel free to reach out in the Animation at Work Slack workspace via the #popmotion channel as well as GitHub’s issue tracker.
If you want a library with a focus on reactive animations, 100% open source, and willing to do some hard development work up front, then Popmotion is for you.
Documentation: B+, Features: B+, Syntax: B+, Community & Support: B+, Stability: B
Those familiar with jQuery will feel right at home with Velocity. Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It features color animation, transforms, loops, easing, SVG support, and scrolling.
If you decide to use jQuery with Velocity, it’s just a matter of replacing $.animate() with $.velocity. It works everywhere including support as far back as IE8 and Android 2.3. There are also plenty of easing options to choose from including spring physics.
See the Pen
Velocity.js sequence by Tommie Hansen (@tommiehansen)
on CodePen.
Currently, this project is still under active development according to GitHub commits. It’s a library that has been on the market for quite awhile, widely used, and well-known. Velocity aims at convincing you from the start how performant it truly is through provided performance tests. There are plenty of articles too including videos and tutorials/books should you ever find yourself stuck. If you’re a ScrollMagic user you’ll be happy to hear that it works well with Velocity. SVG support is great too.
If you need a library with documentation that reads well, has a friendly syntax, works with & without jQuery, a long track record, abundant resources of teaching materials, and decent community support then Velocity is for you.
While it’s important to think long-term, it’s just as important to solicit team feedback before making a decision. If you go with a minimalistic library today because it technically does what you need in that particular moment, you might not plan for what happens in 6 months when you need to add something more ambitious.
If you’re using a library with little traction or support it can backfire long-term; especially if you run into browser bugs. A long track record helps businesses feel safe, but a well documented, easy to read syntax with strong support and a good track record will keep both sides pleased. Let me hear your thoughts in the comments and happy animating!
Special thanks to the Animation At Work Slack community for their time and opinions on this topic.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how the call stack, event loop, and various queues help JavaScript handle asynchronous operations while maintaining its single-threaded nature.
Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.
null, undefined, or empty values in JavaScriptIn most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?
Discover how the MERN stack (MongoDB, Express.js, React, Node.js) enables developers to build dynamic, performant, modern websites and apps.
2 Replies to "Comparing the top JS animation libraries for use in React apps"
What do you think about react motion and react spring framework?
I was about to ask the same. What are your opinions on those libraries and have you tried any of the ones listed here ? I wanted to start with either animejs or react-spring.