📍 How Timing Works
The animation timeline begins when the selected part of your trigger element (top, center, or bottom) touches the selected part of the viewport (top, center, or bottom).
The animation ends in the same way — based on your chosen "end" alignment.
🔁 Demonstration Setup
To demonstrate the differences, we’ll use a parametric animation with a "while scrolling" interaction:
Trigger: a red frame
Target: a blue circle
Animation: the circle grows and changes color
The interaction is the same in all three cases — only the start and end points change.
In all three examples below, the interaction remains the same — only the start and end points differ:
🔸 Example 1
Start when: Element: Top | Touches viewport: Bottom
End when: Element: Bottom | Touches viewport: Top
🔸 Example 2
Start when: Element: Top | Touches viewport: Center
End when: Element: Bottom | Touches viewport: Center
🔸 Example 3
Start when: Element: Center | Touches viewport: Center
End when: Element: Top | Touches viewport: Top
