Expanding Footer Section in Framer

Expanding Footer Section in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

Expanding Footer Section in Framer

This is an expanding footer section recreated in Framer, as spotted on Spencer Gabor’s website. Remix the project to see how you can recreate such animation in framer using scroll transform and ofc without having to code anything.

image of Nandi Muzsik
image of Prianca S.

Created by

,

and

Large 'CONTACT' text with email and social links below on a dark background
Large 'CONTACT' text with email and social links below on a dark background
Large 'CONTACT' text with email and social links below on a dark background

About the resource

To create this expanding footer effect, I first wrapped the main footer text inside a frame and added a scroll transform to it. I adjusted the X and Y origin points to control the rotation. Then, I set it to rotate on the X-axis, starting from 90 degrees and moving to 0 degrees as you scroll.

After that, I added more text below it and grouped everything into a new content frame. On this frame, I added another scroll transform, moving it along the Y-axis from 200px to 0px, triggered when the section comes into view. I nested this content frame inside another frame and set it to a fixed position at the bottom.

Finally, I stacked two sections and the footer section inside the main scrollable frame, and applied a scroll section to the footer. So when the footer becomes visible, the text expands and animates smoothly as you scroll.

About the resource

To create this expanding footer effect, I first wrapped the main footer text inside a frame and added a scroll transform to it. I adjusted the X and Y origin points to control the rotation. Then, I set it to rotate on the X-axis, starting from 90 degrees and moving to 0 degrees as you scroll.

After that, I added more text below it and grouped everything into a new content frame. On this frame, I added another scroll transform, moving it along the Y-axis from 200px to 0px, triggered when the section comes into view. I nested this content frame inside another frame and set it to a fixed position at the bottom.

Finally, I stacked two sections and the footer section inside the main scrollable frame, and applied a scroll section to the footer. So when the footer becomes visible, the text expands and animates smoothly as you scroll.

About the resource

To create this expanding footer effect, I first wrapped the main footer text inside a frame and added a scroll transform to it. I adjusted the X and Y origin points to control the rotation. Then, I set it to rotate on the X-axis, starting from 90 degrees and moving to 0 degrees as you scroll.

After that, I added more text below it and grouped everything into a new content frame. On this frame, I added another scroll transform, moving it along the Y-axis from 200px to 0px, triggered when the section comes into view. I nested this content frame inside another frame and set it to a fixed position at the bottom.

Finally, I stacked two sections and the footer section inside the main scrollable frame, and applied a scroll section to the footer. So when the footer becomes visible, the text expands and animates smoothly as you scroll.

Scroll Transform settings showing a 3D rotate effect triggered by the footer section

The scroll transform effect in Framer.

Scroll Transform settings showing a 3D rotate effect triggered by the footer section

The scroll transform effect in Framer.

Scroll Transform settings showing a 3D rotate effect triggered by the footer section

The scroll transform effect in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

    COSMOS logo with spiral vortex animation of images

    Spiral Vortex Animation in Framer

    Animation

  • Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation

    Framer scroll-based zoom animation with layered futuristic city images

    Card Stack Scroll Animation in Framer

    Animation