Animation
Spiral 3D Scroll Animation
This is a 3D spiral scroll animation recreated in Framer, from Elison’s Webflow template. The concept behind this effect is to position cards in a spiral using 3D transforms. Feel free to remix the project and explore how this scroll animation can be built in Framer.
About the resource
To create the 3D spiral scroll animation, I started by setting up a 3D space using transforms with perspective, preserve 3D, and rotate. Within this space, I added five “arms” to position the cards in a spiral. Each arm is a frame with a card 3D-rotated (-90°) on the y-axis and set at the end of the arm with absolute positioning. The arms are stacked with relative positioning and rotated along the y-axis (0°, 45°, 90°, 135°, 180°).
About the resource
To create the 3D spiral scroll animation, I started by setting up a 3D space using transforms with perspective, preserve 3D, and rotate. Within this space, I added five “arms” to position the cards in a spiral. Each arm is a frame with a card 3D-rotated (-90°) on the y-axis and set at the end of the arm with absolute positioning. The arms are stacked with relative positioning and rotated along the y-axis (0°, 45°, 90°, 135°, 180°).
About the resource
To create the 3D spiral scroll animation, I started by setting up a 3D space using transforms with perspective, preserve 3D, and rotate. Within this space, I added five “arms” to position the cards in a spiral. Each arm is a frame with a card 3D-rotated (-90°) on the y-axis and set at the end of the arm with absolute positioning. The arms are stacked with relative positioning and rotated along the y-axis (0°, 45°, 90°, 135°, 180°).
The card is placed at the end of the arm within the 3D space.
The card is placed at the end of the arm within the 3D space.
The card is placed at the end of the arm within the 3D space.
Once the structure was ready, I placed it inside a sticky frame and set the overflow to visible. This lets the spiral animate smoothly on scroll. Each card is a component with a hover variant that slightly scales the image for extra interactivity. If you're curious about using 'Arm' frames to create circular designs, this video covers that technique in detail.
Once the structure was ready, I placed it inside a sticky frame and set the overflow to visible. This lets the spiral animate smoothly on scroll. Each card is a component with a hover variant that slightly scales the image for extra interactivity. If you're curious about using 'Arm' frames to create circular designs, this video covers that technique in detail.
Once the structure was ready, I placed it inside a sticky frame and set the overflow to visible. This lets the spiral animate smoothly on scroll. Each card is a component with a hover variant that slightly scales the image for extra interactivity. If you're curious about using 'Arm' frames to create circular designs, this video covers that technique in detail.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
