Skip to main content

Stacked cards on scroll animation

I
Written by Inbal Shemesh
Updated over 5 months ago

In this interaction, we’ll animate the cards in the hero section using a scroll-based parametric animation.

Step-by-step setup

  1. Set the hero frame to sticky position

  2. Make sure to increase the height of the frame hero frame to make it scrollable

  3. Create a parametric animation on scroll

  • Select the frame named hero frame

  • Open the Interact panel and create a new parametric animation

  • Choose the action: While scrolling

Interaction Settings → Trigger / Target

  • Trigger: hero frame (already selected)
    → Turn "By name" OFF

  • Target: cards (frame to animate)

Animation Properties

  • Choose: Move, Rotate, Scale

  • Keep "Change to" selected

Set values:

  • Move (Y) = -1000

  • Rotate = 270°

  • Scale X = 1.3

  • Scale Y = 1.3

  • Duration = 10s

Text & Animation Options Panel

  • Turn ON Animate inner objects

  • Set Interval = -15s

Interaction Settings → Triggering Event

Click Customize button, then set:

  • Smooth Animation ON

  • Start when element: Top

  • Touches viewport: Top

  • End when element is: Bottom

  • Touches viewport: Bottom

  • Animate while scrolling ON
    ​

Related Articles
Basics of animations & interactions
Text animation by letter while scrolling
3D gallery mouse movement interaction
Basics of scroll animations timing
How to Add a Scroll-to-Top Button
Did this answer your question?