ScrollTrigger

ScrollTrigger in GSAP excels in linking animations to scrolling, ideal for activating off-screen elements and enhancing user engagement with interactive, scroll-synced content.

The ScrollTrigger functionality is a standout feature in GSAP, renowned for its capacity to anchor animations to the scrolling action. This is particularly advantageous for activating animations on elements that are initially off-screen, or "below the fold." Animations that unfold in sync with the user's scroll impart a dynamic, engaging user experience, as the content comes to life interactively as they scroll down the page.

ScrollTrigger boasts a variety of configurable settings that provide granular control over how these scroll-based animations are triggered and how they behave. These settings allow for customization that can match almost any creative vision or interaction design.

Lock to Scrollbar

Activating 'Lock to Scrollbar' synchronizes animations with the scrollbar's position, ensuring that element animations align precisely with the scroll. When this option is turned on, it reveals an additional setting to adjust the delay. This delay introduces a lag effect; the greater the value, the more pronounced the lag, creating a sense of depth and enhancing the user interaction with the scroll path.

Pinned Element

The 'Pinned Element' feature is a highly favored tool that allows elements to remain stationary during scrolling, creating an eye-catching effect. Upon activation, you can easily select the target element using our in-built scanner or input the element's ID or class manually. The element remains fixed in the viewport based on pre-defined 'Starts When' and 'Ends When' parameters.

For instance, a common scenario involves pinning a section so it stays put for the duration of its own height. Here, 'Starts When' is typically set to when the Element's Top is at 0% of the viewport, initiating the pin as the element's top edge meets the viewport's top. The pinning ends when the Element's Top is at -100%, which is when the element has completely scrolled out of the viewport, causing the pinned element to release and resume the normal document flow.

Trigger Each Iteration Individually

The 'Trigger Each Iteration Individually' option is an essential toggle for creating nuanced animations when dealing with multiple elements sharing the same class. For example, if you have a series of .card elements in different sections of your page, enabling this toggle will allow each card to animate separately as it comes into view. This ensures that animations are triggered individually at the specific moment each element crosses the 'Starts When' threshold. Without this feature activated, all elements with the same class would animate simultaneously when the first occurrence of the class meets the 'Starts When' line, which may not be the desired effect.

Starts When

The animation starts when the selected position of the element or selector (top, center or bottom) reaches a certain part of the viewport that you choose. We will explain more below.

Element vs. Selector: Opting for 'Element' uses the animation's target element as the trigger point which are used in your animation nodes. Selecting 'Selector' allows you to specify a custom trigger, such as body, .class-name, or #ID-name of your choosing.
Position: You can define whether the animation triggers when the top, center, or bottom of the Element or Selector crosses the 'Starts When' line (depicted as a green line within Motion.page's interface).
Offset: There is an option to apply a positive or negative offset to adjust the trigger point further, ensuring the animation aligns perfectly with your design intent.
Reaches Box: Here, you set the viewport percentage that corresponds to the 'Starts When' line. For an animation that progresses from the viewport's bottom to its top, you would set 'Starts When' at 100% (bottom of the viewport) and 'Ends When' at 0% (top of the viewport).

Ends When

The 'Ends When' setting mirrors the 'Starts When' functionality but applies to the point where the animation is set to conclude.

Enable Clamp

The 'Enable Clamp' option serves to confine the animation trigger points within the boundaries of the page's scrollable area. It ensures that the 'Starts When' and 'Ends When' values do not exceed the scrollable content's limits, preventing animations from being cut off or only partially playing. This ensures a smooth and complete animation experience as users scroll through the page.