Uncode 2.9.2 introduces a powerful new set of animation options for Inner Rows. These animations, powered by GSAP, transform static Inner Rows into interactive, layered visuals that add depth and dynamism to your page. With smooth transitions, Inner Rows can function as animated elements, commonly known in technical terms as 'Stacked Cards'.

The true strength of the Stacked Inner Rows animation lies in its flexibility. You have complete control over how the "cards" behave—whether in their initial positions, their movements, or their interactions with users.

While this effect is perfect for showcasing portfolios, products, or creative galleries, it also allows for the creation of more conventional content sections. To offer maximum versatility, this feature has been implemented as an option for Inner Rows rather than directly as a layout for the Posts module. However, we are considering adding this functionality to the Posts module in future updates.

Please find below example pages from our demo site:

• Stacked Cards
• Portfolio Stacked
• Portfolio Cards

How to Enable the Stacked Inner Rows Animation

1. Open the Row Settings;
2. Navigate to the Animation tab;
3. Select the Inner Rows option, screenshot .

How to create a Portfolio/Blog list from scratch

1. Open the Row Settings and navigate to the Animation tab;
2. Select the Inner Rows option and configure the settings to your requirements, screenshot ;
3. Add an Inner Row, then insert a Posts Module within it, screenshot ;
4. Open the Build Query option and set the Post Count to 1, screenshot ;
5. Configure the Posts Module as desired. For a "Card" layout, the recommended settings are: Metro Layout with Fluid Heights, screenshot ; Width 12/12, Height 100%, screenshot ;
6. Duplicate the first Row and open the second Posts Module’s settings. Set the Post Offset to 1 to skip the first post in the query, screenshot ;
7. Repeat this process for as many cards as needed, increasing the Post Offset by 1 for each subsequent Inner Row (e.g., the third Row will have an Offset of 2, the fourth Row an Offset of 3), screenshot .

Using the Wireframes

For quick setups, you can use pre-built layouts via the Wireframes Plugin. Simply open the plugin window from the Page Builder, search for 'Cards' layouts, and insert them with a single click, screenshot .

Options

• Animation: Choose the type of scroll-triggered animation. Select 'Row' to apply animations to Row properties or 'Inner Rows' to define animations for Inner Rows.
• State: Defines whether the animation's specified values represent the starting point ('Start') or the ending point ('End'). If 'Start' is chosen, the Row will appear normal at the maximum animation point. If 'End' is chosen, the Row starts with its normal appearance and applies the changed property values at the maximum animation point.
• Element: Choose whether to apply the animation to the element itself or its Mask. Using a Mask can create appearance effects based on the Row’s dimensions. Note that not all properties are available with the Mask method.
• Origin: Sets the starting point of the animation. Adjusting this can significantly impact the animation depending on the properties being animated.
• Scale Method: Determines whether the scale value adjusts fluidly based on the page's total width or is linked to the Limit Width value (the content width).
• Scale: Sets the scale value from 0 to 200, with 100 as the default.
• Scale Steps: Enable progressive scaling for a stepped visual effect.
• Scale Mask: Sets the scale masl value from 0 to 200, with 100 as the default.
• Opacity: Sets the opacity value from 0 to 100, with 100 as the default.
• X-Move: Adjusts horizontal movement on the X-axis from -100 to 100, with 0 as the default.
• X-Move Alternate: Use to make the value of X-Move alternately one the opposite of the other. This option causes, for example, one element to enter from the right and one element from the left of the viewport, etc.
• Y-Move: Adjusts vertical movement on the Y-axis from -100 to 100, with 0 as the default.
• Blur: Sets the blur intensity from 0 to 100, with 0 as the default. Note that this effect can be resource-intensive and may slow down rendering in some browsers.
• Rotate: Defines the rotation angle from -100 to 100, with 0 as the default. The rotation effect depends on the Origin property. Setting a value other than 0 disables the Perspective option, as they are not compatible.
• Perspective: Sets the 3D rotation value from -100 to 100, with 0 as the default. The effect depends on the Origin property.
• Rotate / Perspective Alternate: Use to make the value of the Rotate or Perspective options alternately one the opposite of the other. This option causes, for example, one element to rotate from one site and one element from the other, etc.
• Border Radius: Define the border radius using px, vw, or em units.
• Starting Point: Set where the animation begins within the viewport.
• Offset: Progressive value in pixels that added to the Top or Bottom to create a stepped effect.
• Inner Vertical Spacing: Defines the vertical space between varire Inner Rows with a Viewport Height value from 0 to 100.
• Scroll Options: Configure how animations behave during scrolling. 'Parent sticky and animated': Inner Rows remain fixed within the Parent Row. 'Parent sticky, itself animated': Inner Rows animate only within their height. 'Itself sticky and animated': Parent Row scrolls while Inner Rows remain sticky.
• Do Not Animate State Item: Prevents the first or last item from animating (based on the State option).
• Anticipate Second Card: Adjust the timing of the second card’s appearance for fine-tuning.
• Ease: Set the easing type for smoother animation endings.
• Disable Mobile: Turn off animation effects on mobile devices.
• Disable Tablet: Turn off animation effects on tablet devices.

Notes

• It is recommended to enable the Smoothscroll option to maximize the potential of GSAP animations. This will ensure a smoother and more fluid scrolling experience;
• We recommend using no more than one set of Inner Rows Stacked Cards per page, as this can become heavy for the rendering engine, especially on pages with a lot of markup and additional effects, especially on mobile devices;
• These animations are not compatible with the Content Slider and the Posts and Media Gallery module in Grid (Isotope) mode with multiple columns are not supported due to technical limitations;
• Please note that "elastic scrolling" of some mobile browsers is disabled when using these effects because the overscroll-behavior property is deactivated, as the bouncing scroll effect can cause unexpected issues;
• Please note that on iOS devices, when scrolling, the browser navbar is hidden. This prevents the slide height from being recalculated. As a result, if the first slide is displayed during scrolling, it may not fully cover the viewport height, which has been reduced by the hidden navbar.