Stacking Cards

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. The demo has a height of 7000px.

At this section you can customize Cards styles at once. However, you can set any style you need at their style tabs.
There are several customizations to create Stacking Cards variations. For example, you can define a custom width per Card instead of shared width to create a perspective effect.

Top: defines the general top distance the cards will stick to. In case you want a stacking effect you can customize top value at each card. The demo uses 25vh.
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.

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. The demo uses “center center”
End: determines the end of the animation. The demo uses +=100%
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

– Tamu