What if website accordions have animations that explains the product visually? That's what I built as a Lottie Animation. Interactive accordion that changes animation based on your selected section.
Animation File Size as dot Lottie: 364KB
Tools Used:
Illustrator
After Effects
Lottie Creator and State Machines
Interactive @LottieFiles Battery UI Animation with fully dynamic battery level and charging indicators. I designed this in Figma, animated in Lottie Creator, and used Claude to vibecode the JavaSCript code that runs this demo in CodePen.
Interactive AC Control UI animation made with @LottieFiles Creator (animation, motion tokens, & state machines). JS script that runs the UI vibe-coded with Claude. A CodePen to bring everything into a smooth demo.
I recreated Notion’s website hero animation as LottieFiles dotLottie to compare it against the original webm version.
Results:
Original webm: 942 KB
dotLottie version: 368 KB
60.93% smaller file size
This can contribute to better web performance and reduced bandwidth...