Pre-loader Animation
Sworup Kumar
Like this project
Posted May 17, 2025
A pre-loader animation designed and built in Framer focusing on motion timing and a bit of vibe coding.
Pre-loader animation - Motion in Framer
A pre-loader animation designed in Framer while exploring the tool. This was an early project in framer focusing on motion timing, easing and some vibe coding.
Project goal:
To create a website pre-loader that is simple but polished using Framer’s native animation capabilities, custom libraries and to get used to Framer's interface.
Animation between start and end states
Adding component
I created a pre-loader component that would work across different viewports. A spring transition animation was added between the two states with custom timings, along with multiple animations to the elements within the pre-loader.
Custom ease animations for background frames
Creating a code override
For animating the loading percentage, I created a code override that would randomly stagger and show a different percentage each time.
The text falling down and moving out of the frame was also added within the override function.
Animated text stagger effect through code override
The result:
A staggered pre-loader animation built using Framer and React libraries that is responsive across devices.