Built with LottieFiles
Recreating Notion’s Hero Animation: dotLottie vs WebM
Dayo Oyinlola
Recreating Notion’s Hero Animation: dotLottie vs Webm
I recreated a production-level hero animation from Notion’s website and converted it into a dotLottie-based implementation to evaluate performance, flexibility, and real-world usability compared to the original webm format.
The goal was simple:
Find out if modern animation formats can outperform traditional video in real UI environments.
The Challenge
Notion’s hero animation is:
Visually rich
Smooth and continuous
Already highly optimized (942 KB webm)
Replacing something that already performs well is not trivial.
The challenge was to:
Maintain visual quality
Reduce file size
Unlock interactivity and flexibility
Ensure scalability across devices
Results
Performance Comparison
Original (webm): 942 KB
dotLottie version: 368 KB
Reduction: 60.93%
This reduction improves:
Load speed
Bandwidth efficiency
Performance on low-end devices
Notion's Hero Animation as dotLottie
The Approach
1. Reverse Engineering the Animation
I analyzed the structure and motion behavior of the original WebM animation:
Timing and easing
Object transitions
Loop behavior
Then recreated it using vector-based animation principles.
2. Rebuilding with LottieFiles
The animation was rebuilt and exported as dotLottie, which allowed:
Structured animation data
Layer-level control
Optimization during export
3. Optimization Strategy
To achieve performance gains:
Removed raster dependencies
Simplified vector paths where possible
Optimized keyframes and timing curves
Leveraged dotLottie compression
Functional Advantages
Beyond file size, the dotLottie version introduces capabilities that video cannot provide:
Resolution Independence: Infinite scaling without quality loss. Consistent rendering across devices.
Interactivity: Animation can respond to user input. Playback can be controlled via code.
Dynamic Customization: Properties can be modified in real time. Enables theme variations like light and dark modes.
UI-Level Integration: Functions as a UI component, not just media. Easily integrated across web and app environments.
Key Insight
The biggest shift is not just performance, it’s control. Video formats like WebM are static outputs. dotLottie transforms animation into a programmable interface element.
Like this project
Posted May 17, 2026
Recreated Notion website's WebM hero animation as dotLottie, achieving 60.93% smaller size while enabling interactivity, scalability, and better UI performance.
