Stacking Cards is a nestable block element made up of Card elements. You can duplicate and delete Cards at pleasure. Stacking Cards will automatically take Cards height to create the stacking effect. If you want the last Card to be stacked as shown in the demo you will have to define a fixed height instead of using an auto height.
Top: defines the general top distance the cards will stick to. In case you want a stacking effect you can customize the top value for each card.
Brightness to, Scale to, Radius to: these are properties that can be animated alongside the stacking effect. The values set here are values applied to the Cards on scroll.
Scroll Reading animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
End: determines the end of the animation if needed. It is specially useful when using the Scrub property.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Here you can customize Cards styles at once. However, you can set any style you need at each Card's style tab.
There are several customizations to create Stacking Cards variations. For example, you can define a custom width per Card instead of a shared width to create a perspective effect.
