Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

Website animation

Website animation

Website animation

Website animation

Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

Footer Scroll Animation in Framer

This is the Framer recreation of this scroll animation that was posted by Emmanuel to Twitter as a Figma prototype. I managed to recreate the scroll animation in Framer without any code. Feel free to remix the project and see how it's built.

This is the Framer recreation of this scroll animation that was posted by Emmanuel to Twitter as a Figma prototype. I managed to recreate the scroll animation in Framer without any code. Feel free to remix the project and see how it's built.

This is the Framer recreation of this scroll animation that was posted by Emmanuel to Twitter as a Figma prototype. I managed to recreate the scroll animation in Framer without any code. Feel free to remix the project and see how it's built.

This is the Framer recreation of this scroll animation that was posted by Emmanuel to Twitter as a Figma prototype. I managed to recreate the scroll animation in Framer without any code. Feel free to remix the project and see how it's built.

Footer Scroll Animation in Framer
Footer Scroll Animation in Framer
Footer Scroll Animation in Framer
Footer Scroll Animation in Framer

Features

This scroll animation primarily uses the scroll transform feature from Framer. Here's how it works: I stack the circles on top of each other, using different Z-indexes to set their order (the white one is on top, with the blue one below). Then, I apply scroll transforms to each by using scroll section triggers, scaling down the circles as I go along.

A neat little trick I utilize is shifting the second scroll section trigger slightly lower. This makes the blue circle start moving slightly after the white one. You can spot this second scroll section under the name "Trigger" in the project.

Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.