New
New
New
Animation
Advanced Sticky Scroll Animation in Framer
This is a Framer recreation of the advanced sticky scroll animation from the McCann website. Feel free to remix the project and see how you can pull off something like this in framer, without writing any code.
About the resource
This scroll animation uses multiple scroll transforms triggered by scroll sections to get the exact animation as original. I applied scroll transform to the moving images at the start, setting large Y-offset values in the from state. For the text opacity change on scroll, I used scroll transform as well. The grid images that explode later use scroll transform with two trigger sections. In the first trigger, the images fade in from opacity 0 to 1 while maintaining same position in both from and to states. In the second trigger, they break apart into a grid by shifting to different to state positions.
About the resource
This scroll animation uses multiple scroll transforms triggered by scroll sections to get the exact animation as original. I applied scroll transform to the moving images at the start, setting large Y-offset values in the from state. For the text opacity change on scroll, I used scroll transform as well. The grid images that explode later use scroll transform with two trigger sections. In the first trigger, the images fade in from opacity 0 to 1 while maintaining same position in both from and to states. In the second trigger, they break apart into a grid by shifting to different to state positions.
About the resource
This scroll animation uses multiple scroll transforms triggered by scroll sections to get the exact animation as original. I applied scroll transform to the moving images at the start, setting large Y-offset values in the from state. For the text opacity change on scroll, I used scroll transform as well. The grid images that explode later use scroll transform with two trigger sections. In the first trigger, the images fade in from opacity 0 to 1 while maintaining same position in both from and to states. In the second trigger, they break apart into a grid by shifting to different to state positions.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
