Animation
3D Flip Scroll Animation in Framer
This is a demo website in Framer that showcases one of the easiest scroll animation techniques, requiring no coding knowledge. Feel free to remix the project to take a closer look at how something like this is structured in Framer.
Created by
About The Resource
I made a tutorial video for this resource. If you want to see exactly how I set up my project to create something like this, make sure to watch the video.
The idea here is to make a section "stick" on the website as we scroll. In this example, the section has the coin illustration with different icons. By using trigger frames and connecting them to scroll sections, these triggers scroll away from the "sticky" section as we scroll down. This setup helps us apply scroll transforms and scroll variants (with scroll section triggers) and modify the coin in our sticky container.
About The Resource
I made a tutorial video for this resource. If you want to see exactly how I set up my project to create something like this, make sure to watch the video.
The idea here is to make a section "stick" on the website as we scroll. In this example, the section has the coin illustration with different icons. By using trigger frames and connecting them to scroll sections, these triggers scroll away from the "sticky" section as we scroll down. This setup helps us apply scroll transforms and scroll variants (with scroll section triggers) and modify the coin in our sticky container.
About The Resource
I made a tutorial video for this resource. If you want to see exactly how I set up my project to create something like this, make sure to watch the video.
The idea here is to make a section "stick" on the website as we scroll. In this example, the section has the coin illustration with different icons. By using trigger frames and connecting them to scroll sections, these triggers scroll away from the "sticky" section as we scroll down. This setup helps us apply scroll transforms and scroll variants (with scroll section triggers) and modify the coin in our sticky container.
Trigger frame structure on the layers panel.
Trigger frame structure on the layers panel.
Trigger frame structure on the layers panel.
As you can see in the image above, we have a few trigger sections. Framer also marks all layers with scroll sections applied with a "#" symbol, making it easier to navigate in the layers panel.
As you can see in the image above, we have a few trigger sections. Framer also marks all layers with scroll sections applied with a "#" symbol, making it easier to navigate in the layers panel.
As you can see in the image above, we have a few trigger sections. Framer also marks all layers with scroll sections applied with a "#" symbol, making it easier to navigate in the layers panel.
