Intro to Interactions with GSAP

Interactions with GSAP let you create smooth, performant, reusable animations directly on Webflow’s visual canvas without extra tools or plugins.

As you build, you can visualize the flow of your interactions on a horizontal timeline and fine-tune controls like timing and sequencing to create a motion-rich experience on your site.

What’s an interaction?

Interactions are sequences built with four key parts: triggers, targets, actions, and animations:

• Trigger type — Click, hover, page load, etc.

• Trigger target — the element (or elements) the trigger acts upon

• Action — a reaction to a trigger

• Action target — the element (or elements) that are affected by the action

• Animation — a type of action where properties change over time.

When a site visitor interacts with your site, a trigger detects that event and starts an interaction. The interaction performs one or more actions, which affect one or more targets.

Some actions are simple –– like adding or removing classes or modifying an element’s styles or attributes –– and others involve visually complex, timed changes (i.e., animations).

As you build interactions in the Interactions panel, they appear on the timeline — a visual tool that sequences multiple actions and animations.

How to create an interaction with GSAP

1. Go to the Interactions panel
2. Choose Interactions with GSAP at the bottom of the panel
3. On the canvas, select an element to trigger the interaction or that you want to animate
4. Click New interaction (if prompted)
5. Choose your trigger (e.g., page load)
6. Choose an action (e.g., fade in)
7. Set trigger target and action target settings as needed
8. Drag blocks on the timeline to adjust timing, duration, and order. Use the playhead to scrub and preview the sequence.
9. Preview your site and interact with the page to confirm everything behaves as expected

Setting interaction scope

The interaction 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:

1. The card's title (.card-title) –– use scope "First ancestor" with selector .card

2. All icons inside the card –– target .icon with scope "Descendants" and selector .card

3. 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.

Interaction example

Show a popover when a button is clicked

• Trigger: Click

• Action: Toggle ARIA attributes + Toggle visibility

• Targets: Button and popover

How to delete an interaction

To delete an existing interaction: 

1. Go to the Interactions panel
2. Hover over the interaction you’d like to delete
3. Click the “three dots” icon
4. Click Delete

This removes all instances of the interaction across your site.

Conditional playback

In an interaction’s settings, conditional playback gives you control over where and when interactions play.

Page scoping

Page scoping allows you to decide on which page(s) the interaction runs.

Breakpoints

You can set up interactions according to breakpoints by using conditional playback. This follows the same breakpoint rules as styling –– interactions will cascade down to smaller breakpoints. To choose the breakpoint on which you want to set the interaction, click the breakpoint icon at the top middle or bottom right of the canvas. If you set an interaction to not animate on a mobile breakpoint and the user resizes their screen to make it smaller, the animation will stop playing as soon as the media query matches the breakpoint size.

Incorporating accessible animations

Certain web animations and flashing content can negatively affect the health and well-being of people with vestibular and photosensitivity disorders. This can include triggering motion sickness and seizures.

As you design your site, it’s best to think about accessibility from the start and create safe animations that don’t cause harm from unexpected or excessive movement or flashing.

Best practices for accessible animations:

• Ensure base animations adhere to WCAG guidelines, without requiring users to set a motion preference on their device

• Ensure animations respect a user’s motion preference by setting conditional playback. Set the interaction to “no animation” or “skip to end” depending whether you want users to see the interaction’s initial state or the end state.

Flash of Unstyled Content (FOUC) prevention

Animations that use from or from/to transitions can sometimes cause elements to appear momentarily before the animation starts — a visual glitch known as Flash of Unstyled Content (FOUC). It’s a common issue across animation frameworks. Webflow automatically prevents FOUC when you use Interactions with GSAP, so your animations play smoothly from the start.

Learn how Webflow’s FOUC prevention works.

Troubleshooting interaction issues

Interactions may not work as expected on published sites if your site incorporates custom code. Custom code is an advanced modification that may conflict with Webflow’s underlying functionality. Our support team is unable to provide direct help with custom code setup or troubleshooting as these topics fall outside the scope of our customer support policy. If you run into issues with custom code, please let us know on the Webflow Forum, where the entire Webflow community (staff included) can provide additional help and resources.

Additionally, Interactions with GSAP will not work on shared Library components.