Animation
Card Stack Scroll Animation in Framer
Created by
About the resource
To create this animation, I started by creating a card component. Then, I added multiple cards and stacked them together. This stack sits inside a wrapper frame that's rotated on the y-axis at -90 degrees, with scroll-based offset values applied for movement, so it starts from the right corner and goes to the left.
Each card also gets its own scroll transform—rotating from 360° to 0°—using a trigger frame. On top of that, every card has fixed rotation and depth settings to keep the 3D look consistent.
The rotated wrapper frame is placed inside a parent frame that has 3D transform properties. Finally, a sticky frame ties it all together to trigger the scroll animation.
About the resource
To create this animation, I started by creating a card component. Then, I added multiple cards and stacked them together. This stack sits inside a wrapper frame that's rotated on the y-axis at -90 degrees, with scroll-based offset values applied for movement, so it starts from the right corner and goes to the left.
Each card also gets its own scroll transform—rotating from 360° to 0°—using a trigger frame. On top of that, every card has fixed rotation and depth settings to keep the 3D look consistent.
The rotated wrapper frame is placed inside a parent frame that has 3D transform properties. Finally, a sticky frame ties it all together to trigger the scroll animation.
About the resource
To create this animation, I started by creating a card component. Then, I added multiple cards and stacked them together. This stack sits inside a wrapper frame that's rotated on the y-axis at -90 degrees, with scroll-based offset values applied for movement, so it starts from the right corner and goes to the left.
Each card also gets its own scroll transform—rotating from 360° to 0°—using a trigger frame. On top of that, every card has fixed rotation and depth settings to keep the 3D look consistent.
The rotated wrapper frame is placed inside a parent frame that has 3D transform properties. Finally, a sticky frame ties it all together to trigger the scroll animation.
The scroll transform effect applied on the cards wrapper frame in Framer.
The scroll transform effect applied on the cards wrapper frame in Framer.
The scroll transform effect applied on the cards wrapper frame in Framer.
