Card Deck (introduced in DiviMotion 1.1.0) is a scroll effect for Divi 5 that turns content inside a Section, Row, or Column into a layered stack of cards. As the user scrolls down, each card pins to the screen, scales down slightly, and moves behind as the next card comes forward. When scrolling up, the cards reverse the same motion and return to their original positions.
How to Enable Card Deck
To use the Card Deck, you will need to activate the extension:
- Go to your WordPress Dashboard.
- Navigate to DiviMotion > Extensions.
- Toggle on Card Deck.
How to Use Card Deck
After enabling the extension, you can apply the card deck effect to any parent container, like Section, Row, or Column.
Here is how to use it:
- Open an existing or create a new one using the Divi Visual Builder
- Click on section, row, column or module's setting.
- Go to the Design tab > Scroll Effect.
- From Effect Type, select Card Deck.
Card Deck Settings
Here are the settings you will find after selecting Card Deck:
1. Deck Offset
Controls how close or far the cards will be when they are stacked on top of each other. It sets how much each card overlaps the one below it.
- Lower values will make the cards overlap more and stay tightly stacked. (Set the value to 0 for no spacing between cards.)
- Higher values will add more space between the cards and make them easier to see.
2. Card Gap
Controls the space between cards before the animation starts. It sets how close or far the cards are when the page first loads, before the user starts scrolling.
- Lower values will keep the cards closer together and create a tighter stacked deck look.
- Higher values will spread the cards farther apart and make each card easier to see.
| Note: Use a value between 0 and 100px to control the spacing between cards in their initial position. |
3. Min Scale
Controls how much the cards in the back shrink while scrolling. It creates a depth effect in the stack. The front card stays full size, and the cards behind it become smaller as they move back.
- Lower values will make the back cards smaller and create a stronger 3D depth effect.
- Higher values will keep the back cards closer in size to the front card.
| Note: Set a value between 0.50 and 1.00 to control how much the back cards shrink. |
4. Scroll Offset
Set where the card deck animation begins. You have to set two values: one for the section position and one for the viewport position. When the section reaches the chosen position in the viewport, the card animation will start.
Common examples are:
| Setting | When the Animation Starts |
| Top Top | When the top of the section reaches the top of the browser viewport |
| Top Center | When the top of the section reaches the middle of the viewport |
| Bottom Center | When the bottom of the section reaches the middle of the viewport |
| Top 20% | When the section reaches about 20% from the top of the viewport |
5. Scrub Speed
Controls how smoothly the horizontal movement follows the user’s scrolling.
- Lower value will make the animation move faster relative to the user's scroll.
- Higher value will make the animation move more slowly and feel smoother.
| Note: Use a value between 0.1 and 5 to control how fast or smooth the animation follows the scroll. |
6. Disable On
Lets you disable the Card Deck animation effect on specific devices, like:
- Desktop
- Tablet
- Mobile
| Note: If you disable the Card Deck animation on a specific device, the content will display in a normal layout without animation on that device. |
What's Next?
Now that you understand the Card Deck effect, you can start using it to create stacked card layouts with scroll animation. Open the Visual Builder, select Card Deck from the Scroll Effect options, and start building your first card stack section.
