Create and manage Interactions with GSAP

Build an interaction from a trigger and action, then reuse, hide, or delete it.

Every interaction starts the same way: choose a trigger, choose an action, and let Webflow handle the rest. This article walks through that process from start to finish, plus how to add more triggers or actions to an interaction you've already built, save your work as a reusable preset, and hide or delete an interaction you no longer need.

Create an interaction

To build a new interaction:

1. Go to the Interactions panel
2. On the canvas, select the element you want to trigger the interaction or that you want to animate
3. Click New interaction, if prompted
4. Choose your trigger, e.g., Page load
5. Choose your action, e.g., a fade-in animation
6. Set your trigger target and action target as needed
7. Drag blocks on the timeline to adjust timing, duration, and order
8. Preview your site to confirm the interaction behaves as expected

For the available trigger types, targets, and scope options, see Triggers & targets. For the available action types and their settings, see Actions and animations.

Add another trigger

To add another trigger to an interaction you've already built:

1. Click the "back" icon next to the action's name
2. Click the existing trigger, or click the "plus" icon to add a new one
3. Set your new trigger's settings

Add another action

To add another action to an interaction:

1. Click the "back" icon next to your action's name
2. Click the "plus" icon
3. Choose your new action
4. Customize it as needed

You can also add actions directly from the interactions timeline.

Save an action as a preset

Presets let you reuse an action's settings across your site, which helps keep your animations consistent.

1. Click the "Save as preset" icon next to the action's name

You can find and reuse saved presets anytime from the Interactions manager panel on the left.

Hide an action

Hiding an action stops it from running without deleting it. Hidden actions stay in your timeline and remain editable, they just won't play in preview mode or on your published site until you turn them back on. This is useful for debugging, testing variations, or staging work in progress.

To hide an action, click the "eye" icon next to the action in the Interactions panel. You can also right-click an action in the timeline and click Show/Hide.

Delete an interaction

To delete an interaction:

1. Go to the Interactions panel
2. Hover over the interaction you want to delete
3. Click the "Options" icon
4. Click Delete

Deleting an interaction removes all instances of it across your site.