What is it?

Stack Shift creates an animated stack of cards where each card shifts its position, size, and rotation to simulate a layered stack effect. Users can navigate through the stack by clicking on the cards or swiping (on touch devices), providing an engaging way to present content sequentially.

How to set it up?

To use the Stack Shift, you need to configure the following attributes on the section, container, and cards:

'data-stack-shift-section'. The main container section for the stack shift effect. This attribute is required to activate the animation.

'data-stack-shift-container'. The element inside the section that wraps the stack of cards. This container will hold all the cards that participate in the animation.

'data-stack-shift-card'. Applied to each individual card inside the container. These elements will be positioned in a stacked arrangement, with animations applied during navigation.