Introducing the Toolbox
I have been delving deeper into the world of animation for web between freelance and personal projects. Animations are crucial moments to elevate your designs from functional to magical - but finding the right balance between workflow and skillset, ease of implementation, and performance can be tricky. To get our bearings, let's take a look at some sample work and what I’ve learned about 4 platforms: Rive, Spline, Three.JS (+ other javascript libraries), and Lottie.
Rive
Spline
Three.JS / Javascript Libraries
Lottie
The 4 products up for comparison today
At a Glance
When thinking about creating web animations, here are a few questions I ask, in order of importance:
- What kind of UI is provided, and how is the editing experience?
- Can the animation be made to be interactive? What tools are given to make this possible?
- How optimized is the animation playback?
- How difficult is the animation to implement into my site or product?
- What does it cost?
The table below ranks the four tools in order given these criteria.
Rive
Best for Interactive 2D motion graphics
Best for interactive timelined 2D Animations or sample UI elements
Familiar UI (a fusion of Figma and a video editing timeline)
App includes built-in interactivity planner (with limitations - variable control is limited. More control available via code)
Built to efficiently play interactive graphics in the editor and at runtime in applications and games.
Basic coding knowledge needed to bring into web or for more advanced interactions like multi-state tracking
Native web player export and more files locked behind paywall
Spline
Browser-based platform with strong support for 3D Web Animations
Best for non-generative 3D animations and interactive models
Best UI of any 3D software I’ve used but still may have a learning curve
Powerful interactivity tools built in
Very optimized, but performance can quickly dip with high polygon count. Built in tools to assess performance are strong.
Can be implemented straight from the app (a bit more work is needed for responsiveness)
All basic features free! AI features locked behind paywall
Three.JS / Javascript Libraries
Best for flexible code-powered animations
Best for coding generative animations via expressions or algorithms
A basic editing UI exists, but these are code-first approaches
Most powerful interactive model - powered by code
Implemented via Javascript files or custom embeds
Performance is code-reliant - relies on <canvas> rather than CSS transforms on pure HTML elements (compared to alternatives below)
Completely free
Alternatives for 2D include GSAP, anime.js, p5.js, and Motion One (these are more performant and are focused on applying native transforms to web elements)
Lottie
Industry standard for non-interactive 2D Animations
Best for animated vector graphics and splash screens
(Clunky) UI editing via After Effects and a Plugin
Interactivity requires code and extensive pre-planning with frame counts delimiting states
Can be added to your project with a simple embed via Lottie Player or LottieFiles (SaaS)
Most performant
Completely free - if you own After Effects or use LottieLab’s creator (limited functionality)
A Deeper Dive
Let's take a closer look at each tool, taking a look at the editing UI and some sample work! By the end of this exploration, you should have a better grasp of what tool you should jump in with.
Rive
Best for Interactive 2D motion graphics
EDITING UI
Familiar! Looks like Figma with an After Effects panel
SAMPLE WORK
Try hovering to see the effect - or tapping on mobile
My Take: A best in class experience that marries a strong vector editing experience with powerful interactivity tools in a fast and intuitive interface. You should feel very comfortable if you have experience with Figma and video editors like After Effects. I would love to see improvements to their embed options and more advanced interactions (such as variable incrementing or cursor following) in the Editor with future updates!
Spline
Browser-based platform with strong support for 3D Web Animations
EDITING UI
.png)
The power of Blender with the simplicity of modern SaaS
SAMPLE WORK
Spline is used to render jewelry pieces around the site!
Try spinning the ring around via touch (two fingers) or click.
My Take: The most intuitive 3D modeling tool I've experienced - bar none. Powerful interactivity (using "states" defined on each object or group) is the cherry on top. Pair that with painless embeds and Spline gets a firm recommendation. Fair warning, even with this glowing review, 3D modeling has it's fair share of headaches, from camera positioning to out of control geometry when sculpting. Be prepared to get stuck a few times!
Three.JS / Javascript Libraries
Best for flexible code-powered animations
EDITING UI
I've set up my environment to preview changes live.
Hit me up on Instagram if you have questions about this setup!
SAMPLE WORK
This animation is powered by running a plane with a mesh texture through a fractal noise function
My Take: If you're comfortable with code, javascript approaches let you create jaw-dropping animations without painstakingly obsessing over every frame of your animation since you can manipulate and create shapes generatively with algorithms and in response to user input. Not for everyone, but certainly an area I want to continue growing in! Pain points include camera fiddling and fighting with canvas sizing and shape scaling for responsive experiences.
Lottie
Industry standard for non-interactive 2D Animations
EDITING UI
.png)
The standard way to make Lottie files is to use After Effects with the 3rd-party Bodymovin plugin. I don't love this environment - After Effects is expensive and heavy, and Bodymovin doesn't support all After Effects features.
My Take: While Lottie is the industry standard, the Frankenstein'd creation process between After Effects and Bodymovin makes me and my computer unhappy. That said, on-site performance and ease of implementation are top tier if you don't need interactivity.
My Winners
Rive
Spline
I feel confident recommending Rive and Spline for those looking to build 2D or 3D animations in familiar, user-friendly settings. They both come with powerful interactivity tools, are well-tuned for performance, are relatively easy to implement, and have little to no cost.
Interface design is often rules-based and even the best design system can feel dead without moments of animation, whether small or large. Each of the above tools is supported by a solid ecosystem of support documentation and guides, and I would recommend each for their designated use case. Alongside these approaches, I'm also interested in improving my skills with native CSS animations and implementing them into projects in the future.
I hope this primer was useful in orienting yourself towards your next project or generally built your excitement about animation on web - if it did, please let me know on
Instagram or
LinkedIn!
