Intro to Interactions with GSAP

Build smooth, performant, reusable animations directly in Webflow's visual canvas — no extra tools or plugins required.

Interactions with GSAP lets you build smooth, performant animations directly in Webflow's visual canvas — no extra tools, no plugins, no code required. From scroll-triggered reveals to complex multi-step sequences, you can design motion-rich experiences with full control over timing, easing, and targeting, all visualized on a horizontal timeline as you build.

What makes it powerful is how well it fits into the way modern teams work. You can scope interactions to components and variants so motion travels with your components whenever they're reused — across pages, across sites, and through Shared Libraries. That means your team can build with motion-ready components at scale, without rebuilding animations from scratch every time. And with built-in GSAP features like SplitText, Staggers, and ScrollTrigger, advanced animation techniques are right there when you need them.

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. Cross-site copy/paste is supported by Interactions with GSAP.

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 a 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

Use interactions in your design system

Interactions with GSAP are a first-class part of Webflow's component system. You can scope interactions directly to components and variants so motion travels with them wherever they're used — across pages, across sites, and through Shared Libraries.

To add a component-scoped interaction:

1. Open a component to enter component edit mode (look for the green ribbon at the top of the canvas)
2. Go to the Interactions panel
3. Add an interaction — triggers and targets are automatically scoped to the component
4. Optionally, update the Runs on dropdown to limit the interaction to specific variants

To animate a single component instance:

1. Select a component instance on the canvas (don't enter component edit mode)
2. Go to the Interactions panel
3. Add an interaction — the trigger target defaults to This element, keeping the interaction page-scoped

Setting interaction scope

The interaction scope limits where targets are found, providing precise control over which elements get animated.

Component scopes (available in component edit mode):

• Main component — the interaction is scoped to the component and runs on all instances, wherever they're used
• Variant — the interaction runs only on the selected variant(s) of the component
• Component instance — a one-off, page-scoped interaction on a single instance; doesn't travel with the component

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