Plays a Lottie/Bodymovin JSON animation via the bundled lottie-web library — no external CDN dependency, meaning the animation loads from your own site rather than fetching from a third-party script host. Lottie is the file format used for lightweight, fully scalable vector animations exported directly from Adobe After Effects, which means genuinely crisp, resolution-independent motion graphics at any display size without the file weight a comparable video would carry.
Why Lottie instead of a GIF or video
A traditional animated GIF or short video accomplishes something visually similar but comes with real drawbacks this widget avoids: GIFs are limited to a small color palette and produce noticeably large files for anything beyond a few seconds, and both GIFs and video are raster formats that pixelate when scaled up or displayed on a high-density screen. A Lottie animation, being vector-based JSON data rather than pixels, stays perfectly crisp at any size and typically weighs a fraction of an equivalent video file, while still supporting genuinely complex, professionally designed motion graphics exported straight from an animator’s actual After Effects project.
Setting up the source
The widget accepts either a direct JSON URL pointing at a hosted Lottie file, or a straightforward file upload — most commonly sourced from a library like LottieFiles, or exported directly from an in-house After Effects project via the Bodymovin plugin.
Playback controls
Loop decides whether the animation repeats continuously once it finishes, appropriate for an ambient background animation or a decorative motion element meant to run indefinitely. Autoplay controls whether the animation starts the moment it’s ready versus waiting for an explicit trigger. Speed scales the playback rate up or down from the animation’s originally exported timing. Reverse plays the animation backward, useful for creating a genuine two-state effect (play forward on one interaction, reverse on another) without needing two separate animation files.
Beyond simple autoplay, a trigger choice decides what actually starts playback — on page load (suited to a hero-section animation that should be moving the instant a visitor arrives) or only once the element scrolls into view (the right choice for anything placed further down the page, so the animation plays when a visitor can actually see it rather than finishing unseen before they scroll to it).
Use it for
Micro-interactions and small animated icons that add a touch of polish without the weight of video — a checkmark that draws itself in, a small animated illustration accompanying a feature description. Loading states and empty-state graphics are a strong secondary use case, where a subtle looping animation communicates "working" or fills otherwise-blank space more engagingly than a static icon. Hero-section illustrations are a third fit, where a larger, more elaborate Lottie animation can serve as a genuinely eye-catching centerpiece without the file-size cost of an equivalent video.
Practical tips
- Match trigger to placement the same way you would for any scroll-aware animation — load-triggered for above-the-fold content, scroll-triggered for anything further down the page.
- Test the animation’s file size before committing to it — while Lottie files are generally lightweight, a very complex exported animation with many layers can still add meaningful weight, worth checking against your page’s overall performance budget.
- Use Reverse thoughtfully for interactive two-state effects (an icon that animates in on hover and reverses out on mouse-leave) rather than treating it as a purely cosmetic option — it’s genuinely useful for building responsive, stateful micro-interactions.