Uncode 2.9.2 introduces the new Row animations triggered by scrolling feature. These options use the GSAP JavaScript animation library to create smooth and visually engaging transitions. It lets you apply different types of scroll-linked animations to Rows, with customizable effects to match your design. These animations make it easy to create eye-catching scrolling effects. They can give your webpage a fresh and dynamic feel, using trendy and impactful transitions that stand out.

Unlike the traditional animations in other Uncode modules, these scroll-triggered animations are connected directly to the scroll action. This means that as you scroll up or down, the animations will play or reverse in sync with the scroll movement. The animation timeline progresses based on the scrolling position, making the effects more interactive.

Please find below simple example pages from our demo site:

• Feature Row Animations
• Creative Lab
• Creative Prototype
• Portfolio Designer

How to enable the Scroll-Triggered animations

1. Open the Row settings;
2. Navigate to the Animation tab;
3. Select the 'Row' option, 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.
• Sticky Scroll: Sets a sticky animation for the Row. Normal scroll behavior resumes after the animation ends.
• Remove Space: When using the Sticky Scroll option, this removes the Row's height. This is useful for creating overlay effects.
• Target: Specify which part of the Row to animate. Options include Content, Background, or Background Media.
• 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 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.
• 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.
• Border Radius: Defines the border-radius value. Acceptable formats include px, vw, em, etc. (e.g., 27px, 2vw, 10em).
• Start: Specifies the point in the viewport where the animation begins.
• Start From: Defines the viewport position where the animation starts. For example, if Start is set to 'Top' and the value is 0, the animation begins when the Row touches the top of the browser. If the value is 100, the animation starts when the Row reaches the bottom of the browser.
• Scroll Length: Sets the animation duration from 0 to 200, with 100 as the default. A value of 100 corresponds to 100% of the browser height. Values below zero activate the Auto setting, which automatically calculates the animation length based on the element's height.
• Safe Scroll: Adjusts the scroll to ensure the animation completes fully before the Row exits the viewport. This is especially useful for animating a Footer.
• Ease: Specifies the easing type for the animation.
• 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;
• When animating properties like Scale or Border Radius on a Row, depending on the scenario, it can be useful placing the Row within a 'Section'. This allows you to easily control the background beneath the Row, ensuring it blends seamlessly with the page or other sections if the background colors differ, screenshot ;
• 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;
• Sticky elements within a Row using Animations will not function correctly because position: fixed conflicts with transform properties. For more details, refer to the MDN documentation on position;
• These animations are not compatible with the Content Slider module due to technical limitations;
• Scroll-triggered animations cannot be combined with the Sticky Scroll layout of the Posts or Media Gallery modules.