Advanced Widgets Nested Motion Card Estimated reading: 4 minutes 29 views Nested Motion Card lets you create interactive card animations that stack, animate, and unstack as users scroll. You can add multiple cards, control their pinning behavior, and style each card with elements like images or text for a smooth and engaging scrolling experience. Requirement Elementor (Page Builder) Animations Addons (Our Plugin)  Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Nested Motion Card Go to your WordPress Dashboard. Click on Animation Addons. Head to the Widgets Tab. Under Advanced, toggle on Nested Motion Card. Or, you can type Nested Motion Card in the search bar to find it instantly. Step 1: Insert Nested Card In the Elementor editor, click the ‘+’ icon (Add Element), and type ‘Nested Motion Card’ into the search field. Once it appears, drag and drop it into the section where you want to add it. Right after clicking, you will find three options: Cards, Pin Stack Options, and Pin UnStack Options. See how it works below: Cards: This section controls how many cards you want to display and animate inside the stack. You can add or remove cards from here. Pin Stack Options: This controls how the cards stack and hold their position during scrolling or animation. Pin UnStack Options: This option controls how the cards unstack or separate after being pinned. Let’s start with ‘Cards’. Step 2: Customize Cards You can add and manage your item cards, set titles, and control how they appear in the animation. Cards Select how many item cards you want to show during the animation, then click on +Add Item. Then, set a title name of your choice. In this example, three item cards are selected. However, you can add as many as you want. Show Title: It lets you control whether to show the title or not. In this example, the Show option is toggled on. Run Animation: This option lets you instantly play or preview the entire card animation. Back to Design: This button takes you back from the animation settings panel to the design options panel of the widget. Step 3: Configure Pin & Unstack It captures both the pin stack and unstack options while keeping it short and documentation-friendly. Pin Stack option This controls how the cards stack and maintain their position during scrolling or animation. You will find options such as Start, End, and End Trigger to manage this. Start: The Start value decides when the pinning animation should begin as you scroll through the section. End: The End value controls when the pinning effect should stop. End Trigger: The End Trigger determines which element controls the end of the pin animation. Note: (Here, you’ll find all the option settings available by default. However, you can customize them as you like to adjust the pinning animation.) Pin Unstack Option This option determines how the cards unstack or move apart after being pinned. You can adjust settings like Start, End, and End Trigger to control this behavior. Start: The Start value determines when the unstacking animation begins as you scroll. End: The End value decides when the unstacking animation finishes.End Trigger: The End Trigger defines which element determines when the unstacking ends. Click on the structure panel on the left side of the screen to open the container. Then, style each container’s design based on your preference. To style each container, click the ‘+’ (Add Element) icon, then search for and select the element you want to style. Next, drag and drop each element into the card items. In this example, the image element is selected. However, you can choose any element you prefer. Final Output You Did It Great job! Your Nested Motion Cards are now set up and ready to go. The cards will move, stack, and unstack smoothly as visitors scroll through your page. You can see your animation in action and make your design look more lively and interactive. Everything is now working, and your page has a fun, animated touch that grabs attention. In addition, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
