2 lottie.js Animation Examples

by Vladimir 1 min read

Bring high-quality animations to the web with Lottie.js, a powerful library that renders After Effects animations in real time. This collection showcases lightweight, scalable animations using JSON files exported via Bodymovin — perfect for icons, loaders, splash screens, and delightful UI moments without compromising performance.

Examples

A bold white typography title 'Animation' where letters float and tilt on hover, accompanied by a dynamic Lottie sparkle effect in the background

DotLottie Interactive Sparkle Header

This is a DotLottie Interactive Sparkle Header. It blends high-performance character-level typography effects with the modern DotLottie animation format. Its function is to create a delightful, “juicy” hero interaction: when a user hovers over the title, the letters individually react with a staggered lift-and-tilt motion, while a complex Lottie sparkle animation plays in the background. (Requires: @lottiefiles/dotlottie-web)

Technologies:
HTML SCSS JavaScript
Difficulty: Intermediate
Browser Support (as of Mar 2026):
Chrome Chrome 80+ Edge Edge 80+ Firefox Firefox 75+ Safari Safari 13+
Features:
DotLottie Integration Letter-by-Letter Stagger Hover Interaction Reduced Motion Support
Code by: Carmen Ansio Carmen Ansio
License: MIT
Carnival Spinner

Carnival Spinnerexternal link