Learn how the timeline organizes and sequences your interaction's actions.
The timeline is a visual container for actions that lets you precisely manage complex sequences.
The timeline appears at the bottom of the canvas when you design an interaction in the Interactions panel. You can click Show timeline to view the full timeline, or click the "hide" arrow to collapse it.
Note
The timeline only appears when you build Interactions with GSAP. It isn't available for previous versions of Webflow interactions.
Anatomy of the timeline
As you design an interaction, the timeline populates individual animations as blocks and actions as tracks that organize them by element or purpose. The timeline organizes tracks chronologically with time markers, so you can visualize all the actions in the interaction as a sequence. Click and drag the tracks to rearrange them, or click and drag their left or right edges to adjust their length.
You can preview your interaction at any point with play, pause, reverse, loop, and speed playback controls. The playhead shows the current time and lets you scrub through actions and animations.
Timeline settings
To adjust timeline settings, click the "back" button next to your action's name. Under Settings, you can choose whether you want your animation to repeat, infinite loop, or yoyo.
Keyboard shortcuts
Note
You can use Control in place of Command and Alt in place of Option on Windows devices.
You can use the following keyboard shortcuts when the timeline is open:
| Action |
Key |
| Delete the current selected action |
Backspace or Delete
|
| Enable "hand tool," which you can use to drag the timeline to scroll horizontally |
H |
| Zoom timeline in |
Option + =
|
| Zoom timeline out |
Option + -
|
| Move selected action forward by 10ms |
Option + .
|
| Move selected action back by 10ms |
Option + ,
|
| Jump selected action forward by 100ms |
Shift + .
|
| Jump selected action back by 100ms |
Shift + ,
|
| Select or deselect an action |
Shift + click |
| Select all actions in the timeline |
Command + A
|
| Copy selected actions |
Command + C
|
| Paste selected actions |
Command + V
|
| Duplicate selected action |
Command + D
|
| Zoom in/out |
Command + mouse wheel |
To hide an action, see Actions and animations.