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:
- How well is this project maintained?
- Is it easy for a team to pick up?
- What’s the syntax like?
Additional aspects examined that help provide solutions towards project and business objectives such as:
- Are costs associated?
- Is it open source?
- Members only?
- Are add-ons available?
- What’s the community like?
These details help a business and team arrive at an educated decision that, hopefully, meets everyone’s needs.
What makes an animation library?
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.
GreenSock
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:
- DrawSVG: Progressively reveal/hide SVG strokes
- MorphSVG: Morph any SVG shape into any other shape
- ScrollTo: Animate scroll position. Works with ScrollMagic
- ThrowProps: Smoothly glide any property to a stop using physics
- Bezier: Animate properties along a Bézier curve.
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…
- More familiarity, more jobs, less training
- The more usage, the more chances bugs surface and get fixed
- A long track record of commitment
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.
- URL: https://greensock.com
- Docs: https://greensock.com/docs
- Plugins: https://greensock.com/docs/Plugins
- Addons/Utilities: https://greensock.com/docs/Utilities
A note on reactive animations with GSAP
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:
- https://codepen.io/osublake/pen/65cdc21ce5c49da45709ff9d09d0a754 — LERP frame independent.
- https://codepen.io/osublake/pen/dmPyaw — Exponential interpolation using LERP on every frame
- https://codepen.io/osublake/pen/PPmJpL — Simple Additive Animation
- http://codepen.io/osublake/full/zvpEMg — Additive Animation
- https://codepen.io/kvndy/pen/YyXLWp — Additive Keyframe Blend
- https://codepen.io/osublake/pen/BLOoOP — Image Panning
- https://codepen.io/osublake/pen/XEJMWE — Screen resize: TweenMax + CSS variables
- https://codepen.io/osublake/pen/EEaPKe — Screen resize: ModifiersPlugin
Anime.js
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.
Mo.js
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.
- URL: http://mojs.io
- Docs: https://github.com/legomushroom/mojs/blob/master/api/readme.md
- Addons:
https://github.com/legomushroom/mojs-player
https://github.com/legomushroom/mojs-curve-editor
Popmotion
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.
Velocity
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.
- URL: http://velocityjs.org
- Docs: https://github.com/julianshapiro/velocity/wiki
- Plugins:
http://velocityjs.org/#uiPack
http://velocityjs.org/#vmd
http://velocityjs.org/#ember
Parting thoughts
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.
Additional libraries and references
- SnapSVG http://snapsvg.io — A JavaScript SVG library by Adobe
- Just Animate https://just-animate.github.io — Tweening engine
- TweenJS https://createjs.com/tweenjs — A JavaScript library for tweening and animating HTML5 and JavaScript properties. Works stand-alone or integrated with EaselJS.
- Sequence JS https://www.sequencejs.com — A JavaScript library that provides a responsive CSS framework for creating unique sliders, presentations, banners, and other step-based applications.
- Moving Letters http://tobiasahlin.com/moving-letters
- Polymorph https://github.com/notoriousb1t/polymorph — Morph SVG paths
- Path.js https://github.com/SamKnows/path.js — A library for morphing between SVG paths
- Lengthy https://github.com/shshaw/lengthy-svg — MicroLibrary for SVG Shape Length in a CSS Var
- https://github.com/googlearchive/flipjs — A helper library for FLIP animations.
- https://github.com/davidkpiano/flipping — A tiny library (and collection of adapters) for implementing FLIP transitions easily.
- TweenRex https://github.com/tweenrex/tweenrex — A reactive tweeting engine
- Web Animation Toolbox https://web-animation.github.io — Awesome tools & books & articles & videos for web-animation
- Reactive — A “reactive animation” is one involving discrete changes, due to events (Conal Elliot/Paul Hudak 1997), or ones that occur based on user event/input and different input/event values. Reactive libraries generally don’t “think” ahead. https://www.youtube.com/watch?v=lTCukb6Zn3g. http://slides.com/davidkhourshid/flipping#/42
Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.
LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.
The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.
Modernize how you debug your React apps — start monitoring for free.
