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.
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.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
