Animation
Cross-Section Scroll Animation in Framer
This cross-section scroll animation was recreated in Framer, from Nick’s work. Feel free to remix the project and explore how to achieve this effect in Framer.
About the resource
To create this cross-section animation, I used a scroll variant on the card component and a scroll transform on the moving images. The scroll variant switches between two states: the default variant, where the image and text are hidden with 0 opacity, and the inserted variant, where all elements become visible. When the scroll section is triggered, the card transitions from the default to the inserted variant.
About the resource
To create this cross-section animation, I used a scroll variant on the card component and a scroll transform on the moving images. The scroll variant switches between two states: the default variant, where the image and text are hidden with 0 opacity, and the inserted variant, where all elements become visible. When the scroll section is triggered, the card transitions from the default to the inserted variant.
About the resource
To create this cross-section animation, I used a scroll variant on the card component and a scroll transform on the moving images. The scroll variant switches between two states: the default variant, where the image and text are hidden with 0 opacity, and the inserted variant, where all elements become visible. When the scroll section is triggered, the card transitions from the default to the inserted variant.
The scroll transform and scroll variant effects in Framer.
The scroll transform and scroll variant effects in Framer.
The scroll transform and scroll variant effects in Framer.
For the moving images, I set a from state and a to state for the moving images. The from state includes an offset and different scale values, and the to state scales the images up to 1.
For the moving images, I set a from state and a to state for the moving images. The from state includes an offset and different scale values, and the to state scales the images up to 1.
For the moving images, I set a from state and a to state for the moving images. The from state includes an offset and different scale values, and the to state scales the images up to 1.
The two variants (default and inserted) of the cards component.
The two variants (default and inserted) of the cards component.
The two variants (default and inserted) of the cards component.
If you want to learn more about scroll animation techniques in Framer, you can watch this tutorial.
If you want to learn more about scroll animation techniques in Framer, you can watch this tutorial.
If you want to learn more about scroll animation techniques in Framer, you can watch this tutorial.
