Animation
Rainbow Stretching Footer Animation in Framer
This is a rainbow stretching footer animation recreated in Framer, from the Dia browser's website. It uses scroll transforms to reveal a colorful footer as you scroll. Remix the project to see how to build this kind of playful interaction with just native Framer tools.
Created by
About the resource
To build the rainbow footer animation, I first imported the rainbow image from Dia browser's website and placed it inside a wrapper frame. I applied a scroll transform to this wrapper, rotating it along the X-axis from 90° to 0° to create the stretching effect as you scroll. The transform origin was set to X: 50% and Y: 100% to control the pivot point of the animation. This entire setup sits inside a fixed-position footer frame, keeping the animation fixed to the bottom of the page.
For the text animation, I created a separate text component with hover interactions. I also applied a scroll transform to the text, shifting its Y position in the "from" state to create motion as it comes into view. Finally, I stacked four instances of this text to form a layered look. The text and image animate as the footer section enters the viewport, triggered by the scroll transform. That’s it!
About the resource
To build the rainbow footer animation, I first imported the rainbow image from Dia browser's website and placed it inside a wrapper frame. I applied a scroll transform to this wrapper, rotating it along the X-axis from 90° to 0° to create the stretching effect as you scroll. The transform origin was set to X: 50% and Y: 100% to control the pivot point of the animation. This entire setup sits inside a fixed-position footer frame, keeping the animation fixed to the bottom of the page.
For the text animation, I created a separate text component with hover interactions. I also applied a scroll transform to the text, shifting its Y position in the "from" state to create motion as it comes into view. Finally, I stacked four instances of this text to form a layered look. The text and image animate as the footer section enters the viewport, triggered by the scroll transform. That’s it!
About the resource
To build the rainbow footer animation, I first imported the rainbow image from Dia browser's website and placed it inside a wrapper frame. I applied a scroll transform to this wrapper, rotating it along the X-axis from 90° to 0° to create the stretching effect as you scroll. The transform origin was set to X: 50% and Y: 100% to control the pivot point of the animation. This entire setup sits inside a fixed-position footer frame, keeping the animation fixed to the bottom of the page.
For the text animation, I created a separate text component with hover interactions. I also applied a scroll transform to the text, shifting its Y position in the "from" state to create motion as it comes into view. Finally, I stacked four instances of this text to form a layered look. The text and image animate as the footer section enters the viewport, triggered by the scroll transform. That’s it!
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
