A
Action
A response to a trigger that changes something on your page. Actions can be instant (like toggling a class) or animated over time (like fading in an element).
Action preset
A saved, reusable action configuration that can be applied when adding new actions to the timeline.
Animation
A type of action that changes properties (position, opacity, scale, etc.) over a specified duration, creating smooth visual transitions.
Auto-Alpha
A special visibility property that combines opacity and visibility settings. When set to 0, the element becomes both transparent and hidden from screen readers.
B
Block
A visual representation of an action on the timeline. Each block shows the duration and timing of an animation.
C
Click
The clicks on which you want the trigger to fire
Control
Controls the playback of the animation
Controls “Scrub on scroll”
Runs through the animation in an exact timing ratio with the scroll trigger (it will also play the animation backwards when someone scrolls up in the viewport). You can adjust the smoothing which determines how long it takes for the action to catch up to the browser’s scroll.
Controls “Trigger actions”
Lets you have more precise control over how the animation plays in response to the target element’s position
Custom event
A trigger that responds to custom JavaScript events, enabling integration with other scripts or third-party tools.
D
Delay
Time in seconds before an animation starts after being triggered.
Duration
How long an animation takes to complete, measured in seconds or milliseconds.
E
Easing
Controls the acceleration and deceleration of an animation. This is sometimes referred to as the “feel” of an animation. Common types include:
Linear: Constant speed
Power 1-4: Varying degrees of ease-in-out
Back: Overshoots then settles
Bounce: Bounces at the end
Elastic: Springs back and forth
Expo: Exponential acceleration/deceleration
Circ: Circular motion easing
End
Determines the placement of the target element in relation to the viewport, and where that element is when the trigger stops firing
G
GSAP (GreenSock Animation Platform)
The professional-grade JavaScript animation library that powers IX3, providing high-performance animations with extensive features.
I
Interaction
A complete animation sequence that connects triggers with actions. An interaction defines what happens when a user or system event occurs.
Interpolation
The calculation of intermediate values between keyframes to create smooth transitions.
J
Jump
A timeline control that moves the playhead to a specific time position instantly.
L
Loop
See "Repeat"
M
Masking (SplitText)
In text animations, defines which split elements (chars, words, or lines) remain visible while others animate.
O
Origin (Transform Origin)
The point around which transformations (rotation, scale) occur. Can be set to corners, center, or custom positions.
P
Playhead
The visual indicator on the timeline showing the current time position. Can be dragged to scrub through animations.
Position (Timeline Position)
Where an action starts on the timeline. In Webflow Interactions with GSAP, position are all absolute.
Property
An animatable characteristic of an element (opacity, position, scale, rotation, color, etc.).
R
Repeat
Number of times an animation plays.
Reverse
Plays an animation backward from its current position.
S
Scope
Limits where targets are found, providing precise control over which elements get animated.
Simple scopes (no additional selector needed):
All matching elements (default): Targets every element on the page that matches your selector
Children: Only targets direct children of the matching elements
Siblings: Targets elements that share the same parent
Parent: Targets the parent element
Next sibling: Targets the immediately following sibling
Previous sibling: Targets the immediately preceding sibling
Advanced scopes (requires an additional selector):
Descendants: All descendants that match a selector you specify
Ancestors: All ancestors that match a selector you specify
First descendant: The first descendant matching your selector
First ancestor: The first ancestor matching your selector
Example:
You have a button with class .trigger-btn inside a card. When clicked, you want to animate:
The card's title (.card-title) –– use scope "First ancestor" with selector .card
All icons inside the card –– target .icon with scope "Descendants" and selector .card
The next card in the list –– target .card with scope "Next sibling"
This way, clicking any button only affects elements related to that specific card, not all cards on the page.
Scroll trigger
Scroll-based animations that include:
Start/End positions: Define scroll boundaries
Scrubbing: Animation progress tied to scroll position
Pinning: Fix elements during scroll
Toggle actions: Trigger different actions on enter/leave
Scrub
Manual dragging of the timeline playhead to preview animations.
Show scroll markers
Visually displays where the scroll trigger begins and ends on the canvas
Speed
The speed of the animation (multiplied by the number chosen. For example, if you set “Speed” to 2, your animation will move at 2x speed)
SplitText
Breaks text into animatable pieces:
Stagger
Applies animations to multiple elements with a delay between each, creating cascading effects.
Start
Determines the placement of the target element in relation to the viewport, and where that element is when the trigger fires
T
Target
The element(s) that receive an action or trigger.
Timeline
The visual interface showing the sequence and timing of actions.
Time Markers: Show seconds/milliseconds
Tracks: Organize actions by element or purpose
Blocks: Represent individual animations
Playhead: Shows current time and allows scrubbing
Controls: Play, pause, and speed controls
Track
A horizontal row in the timeline that organizes related animation blocks.
Transform
Properties that change an element's position, size, or orientation:
Move (X/Y): Position changes
Scale: Size changes
Rotate: Orientation changes
Skew: Slanting distortion
Trigger
An event that starts an interaction:
Click: Mouse click or tap
Hover: Mouse enter/leave
Scroll: Scroll-based events
Load: Page load
Custom: JavaScript events
Trigger snippet
Your custom code creating the trigger
Tween
Short for "in-between," a single animation that transitions from one state to another.
Type (hover)
Whether you want the trigger to fire when the mouse enters or leaves the element
V
Visibility
See "Auto-Alpha"
Y
Yoyo (Repeat back and forth)
Makes an animation play forward then backward on each repetition, creating a back-and-forth effect.