Use set actions to change an element’s properties or classes.
Set actions let you apply instant changes to an element’s properties or classes at a specific moment in a timeline. Unlike time-based animations, Set actions perform a zero-duration update, which is perfect for non-animatable properties or immediate state changes you don’t want to animate.
Set actions are powered by gsap.set() under the hood and appear as diamond-shaped keyframes in the timeline.
When to use a set action
Use a Set action when you want something to change instantly, without animating over time. Common examples include:
- Showing or hiding elements (e.g.,
display: none) - Toggling classes for state changes
- Adjusting properties that can’t be animated
- Preparing an element for a later animation (e.g., snapping it to a starting position)
If the change can't or shouldn’t interpolate a Set action is the right choice.
How set actions work
A Set action applies values immediately at the moment it appears on the timeline.
- No duration — set actions always have a duration of
0s - No easing — because they don’t animate, there is no easing curve
- Instant effect — the new property or class is applied at that exact point in the sequence
- Displayed as a diamond — this helps differentiate them from animations, which appear as blocks on the timeline
How to add a set action
- Select the interaction you want to edit
- Choose Add action from the action list or timeline
- Select Set as the action type
- Choose the element(s) you want to affect
- Change the properties or classes
- Drag the diamond keyframe in the timeline to position it at the exact moment you want it to occur
Your Set action will trigger instantly when the playhead reaches that point.
How to set specific properties
Some properties are non-animatable and can only be changed on a set action. Examples of these are:
- Classes
- Display
- Z-index
- Position
- Overflow
- Events (also called Pointer events)
How to convert actions
You can convert an animation to a set (and vice versa).
- When converting from an animation action to a set action certain settings unsupported by set will be discarded like duration, stagger effects, and values in the From column
- When converting from a set action to an animation action non-animatable properties will be discarded
To convert an action to a different type:
- Locate is on the visual timeline at the bottom of the screen
- Right click on the action to open the context menu
- Click Convert action and choose the new action type