Animation
3D Curved Grid Scroll Animation in Framer
This is a 3D curved image grid created in Framer, recreated from the Codrops website. For this recreation, I used a simple scroll transform to animate this 3D effect. Fully no-code. Feel free to remix the project to see how something like this is built in Framer.
Created by
About the resource
All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space. If you want to learn more about 3D transform in Framer, make sure to watch my full crash course on it.
To create this animation, I first developed the right structure and placed all 36 images within a common container frame. The key thing here is to nail the trigger scroll transforms on the images, to create that “distortion” effect when you scroll down.
About the resource
All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space. If you want to learn more about 3D transform in Framer, make sure to watch my full crash course on it.
To create this animation, I first developed the right structure and placed all 36 images within a common container frame. The key thing here is to nail the trigger scroll transforms on the images, to create that “distortion” effect when you scroll down.
About the resource
All of this is possible thanks to 3D transforms in Framer, which allow you to project any layer in 3D space. If you want to learn more about 3D transform in Framer, make sure to watch my full crash course on it.
To create this animation, I first developed the right structure and placed all 36 images within a common container frame. The key thing here is to nail the trigger scroll transforms on the images, to create that “distortion” effect when you scroll down.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and then transform the images within this sticky positioned frame, as they start falling in place in their desired positions.
But how?
We are using trigger frames and scroll sections to trigger scroll transforms on the images. And what happens is that our sticky positioned frame (and the images) stays in the viewport as we scroll further down the site. Furthermore, the images transform variables - opacity, scale and rotation are modified to create the curved effect as the images start appearing into the frame.
If you want to learn more about how you can utilize sticky positioning to create crazy scroll animations in Framer, make sure to check out this tutorial.
The trick here if you’re creating this on your own, is that each quadrant is mirroring the opposite quadrant. This was essential to create the sense of fluidity in the scrolling interaction.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and then transform the images within this sticky positioned frame, as they start falling in place in their desired positions.
But how?
We are using trigger frames and scroll sections to trigger scroll transforms on the images. And what happens is that our sticky positioned frame (and the images) stays in the viewport as we scroll further down the site. Furthermore, the images transform variables - opacity, scale and rotation are modified to create the curved effect as the images start appearing into the frame.
If you want to learn more about how you can utilize sticky positioning to create crazy scroll animations in Framer, make sure to check out this tutorial.
The trick here if you’re creating this on your own, is that each quadrant is mirroring the opposite quadrant. This was essential to create the sense of fluidity in the scrolling interaction.
The technique
Essentially, what we do is keep a sticky positioned frame in the viewport as we scroll down on the website, and then transform the images within this sticky positioned frame, as they start falling in place in their desired positions.
But how?
We are using trigger frames and scroll sections to trigger scroll transforms on the images. And what happens is that our sticky positioned frame (and the images) stays in the viewport as we scroll further down the site. Furthermore, the images transform variables - opacity, scale and rotation are modified to create the curved effect as the images start appearing into the frame.
If you want to learn more about how you can utilize sticky positioning to create crazy scroll animations in Framer, make sure to check out this tutorial.
The trick here if you’re creating this on your own, is that each quadrant is mirroring the opposite quadrant. This was essential to create the sense of fluidity in the scrolling interaction.
