Animation Triggers

START: specifies the scroll position where an animation or actions should commence. 

END: determins the scroll position where an animation or actions triggered by the start position should conclude.

The static viewport remains fixed and doesn’t scroll, while the element changes its position as we scroll. Consequently, both the Start and End positions are determined in relation to the unmoving viewport. In essence, the trigger point for the animation occurs when the element’s position aligns with the static position of the viewport.

To simplify matters, default consideration is given to three key positions for both the viewport and the element: TOP, CENTER, and BOTTOM. These positions can be combined to create a singular animation trigger point. 

At times, the three key positions may lack precision, prompting the use of the offset option for fine-tuning the trigger position. The offset, a positive or negative value in any acceptable CSS unit, is applied to the element itself. 

By default, the element itself serves as the trigger for animation. However, any other element on the page can act as a trigger point if you prefer. 

In such a case, you can enter the element ID into the Start trigger element input field, and that specific element will then determine your defined START and END positions.

By adding the End Trigger element as well, the Start Trigger element ceases to be the trigger point for the animation END. In such a case, the End Trigger element is intended to take over the role of the animation ending point.

If the default setup is insufficient for your needs, you have the option to manually compose the Start and End animations.
Both inputs allow you to enter custom expressions.

When using expressions, you can reference the current element with the object keyword.