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.

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.

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.

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.

A staggered pre-loader animation built using Framer and React libraries that is responsive across devices.