Animation
Expanding Cards Scroll Animation in Framer
This is a Framer recreation of the expanding cards scroll animation originally seen on the eBay Playbook website. Remix the project to explore how this scroll animation is built in Framer, without any code.
About the resource
This scroll animation uses some of the best no-code features of Framer. To create it, I used the scroll variant, with the default variant having all the images within a frame, slightly rotated. In the expanded variant, the images are repositioned diagonally using absolute positioning.
About the resource
This scroll animation uses some of the best no-code features of Framer. To create it, I used the scroll variant, with the default variant having all the images within a frame, slightly rotated. In the expanded variant, the images are repositioned diagonally using absolute positioning.
About the resource
This scroll animation uses some of the best no-code features of Framer. To create it, I used the scroll variant, with the default variant having all the images within a frame, slightly rotated. In the expanded variant, the images are repositioned diagonally using absolute positioning.
The two variants (default and expanded) of the card component.
The two variants (default and expanded) of the card component.
The two variants (default and expanded) of the card component.
For the scrolling effect, the card is placed inside a sticky frame with the scroll variant applied. The trigger is set to "layer in view" with the start at the center, and you can easily switch the card component variant from "default" to "expanded." Simple, right?
For the scrolling effect, the card is placed inside a sticky frame with the scroll variant applied. The trigger is set to "layer in view" with the start at the center, and you can easily switch the card component variant from "default" to "expanded." Simple, right?
For the scrolling effect, the card is placed inside a sticky frame with the scroll variant applied. The trigger is set to "layer in view" with the start at the center, and you can easily switch the card component variant from "default" to "expanded." Simple, right?
The scroll variant effect in Framer.
The scroll variant effect in Framer.
The scroll variant effect in Framer.
