New
New
New
Animation
3D Grid Scroll Animation in Framer
This is a 3D grid scroll animation recreated in Framer, as seen on Lumen Art Space website. Feel free to remix the project and see how you can achieve something like this in Framer without writing any code.
Created by
About the resource
To create this animation, I first set up the scroll animation structure and placed all 12 images inside an image wrapper frame, applying 3D transform properties to them.
Essentially, I kept a sticky frame fixed in the viewport as you scroll down, and the images inside it transform as they fall into their desired positions. Using four trigger frames for different sets of images, each group animates with slightly different timing. The images change in opacity, scale, 3D rotation, and x/y offset values, forming a 3D grid.
Finally, I added a text layer above the image grid that stays fixed in position throughout the scroll.
About the resource
To create this animation, I first set up the scroll animation structure and placed all 12 images inside an image wrapper frame, applying 3D transform properties to them.
Essentially, I kept a sticky frame fixed in the viewport as you scroll down, and the images inside it transform as they fall into their desired positions. Using four trigger frames for different sets of images, each group animates with slightly different timing. The images change in opacity, scale, 3D rotation, and x/y offset values, forming a 3D grid.
Finally, I added a text layer above the image grid that stays fixed in position throughout the scroll.
About the resource
To create this animation, I first set up the scroll animation structure and placed all 12 images inside an image wrapper frame, applying 3D transform properties to them.
Essentially, I kept a sticky frame fixed in the viewport as you scroll down, and the images inside it transform as they fall into their desired positions. Using four trigger frames for different sets of images, each group animates with slightly different timing. The images change in opacity, scale, 3D rotation, and x/y offset values, forming a 3D grid.
Finally, I added a text layer above the image grid that stays fixed in position throughout the scroll.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
