Intro to Interactions with GSAP

Build smooth, reusable animations directly in Webflow's visual canvas, no 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.

Interaction example

Show a popover when a button is clicked

• Trigger: Click
• Action: Toggle ARIA attributes + Toggle visibility
• Targets: Button and popover

Ready to build one? See Create and manage interactions with GSAP for the full walkthrough. For the available trigger types, targets, and scope options, see Triggers & targets. For the available action types, see Actions and animations.

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

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.