Webflow Interactions: Which Motion Tool Fits Each Job, and What to Leave Out

Key takeaways

• Use Interactions with GSAP for anything new. Webflow's help center calls it the recommended version and the only one that will stay compatible with new features. It is the default on sites with no existing Classic work.
• Keep Classic only for a named gap. Navbar, dropdown, tab and slider change events, page branching, non-primary locales and DevLink exports are still Classic only, per Webflow's comparison table.
• Do not mix the two without a reason. Each version loads its own resources. Webflow ranks GSAP alone first, Classic alone second and both together last.
• A hover colour needs no interaction. Webflow's design guide says to use a CSS transition for simple changes between a rest state and a hover state.
• Most motion should be short. Webflow suggests 150 to 300ms for hovers and clicks, 300 to 600ms for menus and modals, and 500 to 800ms for entrances.
• Set reduced motion on purpose. Conditional playback lets you choose "no animation" or "skip to end" for people who ask their device for less movement.

The short answer

Webflow Interactions are visual rules that change a page when something happens: a click, a hover, a page load or a scroll. Start with the lightest tool that does the job. A single state change goes in the Style panel. A sequence, or anything that moves a second element, goes in Interactions with GSAP. Illustrations and 3D scenes go in Lottie, Rive or Spline. Write custom code only when the panel truly cannot express the behaviour, because that code becomes yours to support.

This guide is written by a studio that builds on Webflow, so we have an interest in the platform. We have also moved our own site off it, and we say what changed further down.

The two versions, and why older guides confuse people

Webflow bought GSAP, and at the end of April 2025 made the library free for everyone. In July 2025 it shipped a new version of its native tool, Interactions with GSAP. The update note from that launch says the older version would remain the default for now. That line is out of date. The current help article says the GSAP version is the default on all new sites, and the Classic version sits one dropdown away at the bottom of the Interactions panel.

The two also think differently, so a tutorial for one can mislead you in the other:

• Classic starts from a page or element trigger, then attaches an animation.
• Interactions with GSAP uses triggers, targets and actions. A trigger starts the sequence. An action is the reaction. An animation is one kind of action, where properties change over time. An action can also be plain, such as adding a class or toggling an ARIA attribute.

Webflow's own example is a popover. The trigger is a click, the actions toggle ARIA attributes and visibility, and the targets are the button and the popover. So this is not decoration. It is how part of the page opens and tells assistive technology that it did.

What each version can do

This table comes from Webflow's help article comparing the versions, read on 2 November 2026. Webflow says it is closing the gaps on the right, so check the article again before a project depends on one.

GSAP is also required for templates submitted to the Webflow Marketplace. So if you sell templates, the choice has been made for you.

Which tool for which job

None of the pages we read sorts the choice this way, so this table is our reading of Webflow's guidance applied to common jobs. The right column is our opinion, not Webflow's wording.

Two tie-breakers help. First, ask who will edit it. Webflow recommends the visual route where possible, so that any trusted team member can update motion and not only those who write code. A marketing team that changes the site weekly should not depend on a script only one person understands. Second, ask whether the motion belongs to a component.

Build motion into the component

This is the most useful recent change, and the easiest to get wrong. Open a component, then add the interaction from inside component edit mode, where you see the green ribbon at the top of the canvas. The motion then runs on every instance and travels through Shared Libraries when the component is installed on another site.

If instead you select one instance on the canvas and add an interaction, it stays scoped to that page and does not travel. So if an animation works on your homepage card but not on the same card elsewhere, this is the first thing to check. It is the same habit of tidy structure we describe in our Client-First naming guide: name the interaction properly too. Webflow's pattern is optional trigger, then target, then action, as in "Page Scroll Parallax Effect".

What to leave out

The question is rarely how to add motion. It is which motion earns its place. These come from Webflow's own guide unless we say otherwise.

• Animating top, left, width or height. These force the browser to recalculate layout. Webflow calls transforms and opacity your best friends, because the GPU handles them smoothly.
• Animating filters, box shadows and blend modes. The guide lists these as expensive to render too.
• Infinite or long decorative loops with no controls. They can drain performance and cause an accessibility issue. Visitors should be able to pause, restart or skip them.
• Lots of elements moving at once on phones. Mobile browsers have stricter limits, so test on real devices. Webflow says plainly to minimise the area of change.
• Perfectly linear motion, unless you mean it. The guide suggests sticking to one or two ease types for consistency.
• Both versions on one site, out of habit. The cost is listed in the takeaways above.

We would add three of our own. Do not make visitors wait for your hero text, since they came to read it. Do not animate body copy, because moving paragraphs are harder to read. And do not count on motion to fix a page that is not getting enquiries. The order of the page and its offer matter far more, as our guides to homepages that get enquiries and why a site is not converting explain.

Timing, in one table

These are Webflow's suggested starting points from its design guide. It also says not to be afraid of going shorter, and that when in doubt you should speed it up.

Accessibility is a setting you must choose

Webflow's help center is direct on this: some animations and flashing content can trigger motion sickness and seizures in people with vestibular and photosensitivity disorders. It gives two rules. Base animations should follow WCAG guidance without the visitor changing anything on their device. Then each interaction should respect their motion preference through conditional playback, set to "no animation" or "skip to end".

The difference between those two matters. "No animation" shows the first state, and "skip to end" shows the last. If an element starts hidden and fades in, "no animation" could leave it hidden, so "skip to end" is usually the one you want for reveals. Test it by turning on reduced motion on your own device. Reduced motion settings are on the GSAP side of the table, which is another reason not to start new work on Classic. Our note on accessibility statements covers how to describe this work publicly.

Breakpoints and phones

Conditional playback also controls breakpoints, and the settings cascade down as your styles do. If you turn off an animation on the mobile breakpoint and someone shrinks their window, it stops as soon as that breakpoint applies. A complex pinned scroll on desktop often deserves a simpler version on a phone.

When custom GSAP code makes sense

Since April 2025 Webflow has let developers load GSAP and its plugins from its CDN and write animation by hand. The risk is who supports it. The help article warns that interactions may not work as expected if a site includes custom code, and says its support team cannot help with custom code setup or fixes. Questions go to the Webflow Forum instead.

So write down who owns any script, keep it in one place, and test it again after large site changes. A free library does not make the upkeep free. Our Webflow maintenance guide to costs covers what that upkeep tends to involve.

Here is what we learned on our own site. When we moved amariq.com from Webflow to a static site, our motion moved to GSAP loaded as a single file. The result looks similar because the library is the same, but every animation is now code that we maintain ourselves. We accepted that because we are the only editors. A team with non-coding editors usually should not.

Moving from Classic to GSAP

The help article we read describes switching versions from the dropdown, and it does not describe an automatic conversion. So treat a move as a rebuild, and do it where it pays:

1. List what runs on Classic now, page by page.
2. Mark anything that needs a Classic-only feature from the table. Those stay for now.
3. Rebuild common motion as GSAP presets or component-scoped interactions.
4. Remove the old version entirely from the pages you finish, since the benefit comes from running one version only.
5. Test on real devices, with reduced motion on and off, before publishing.

If some Classic work has to stay, Webflow notes many sites will not see a problem, but test yours. Our website speed guide shows what to measure.

How we help at Amariq

We build on Webflow, and we set up motion so your team can still edit it after handover: presets, sensible names, motion inside components and reduced motion settings from the start. If an existing site feels slow or busy, we can review what each animation is doing and cut what does not help. See Webflow development and Webflow maintenance.

Related reading

Figma to Webflow covers the handoff before motion starts. Webflow vs Framer compares the two platforms for design-led sites. Webflow pricing by plan helps once the build is planned.

Frequently asked questions

What are Webflow Interactions?

They are visual rules for changing a page when an event happens. The event can be a click, hover, page load or scroll. The change can be an animation or a simple action, such as adding a class.

Are Webflow Interactions built on GSAP?

The current default version is. Webflow's help center says Interactions with GSAP uses the GSAP engine for creating, editing and displaying interactions. The older Classic version is still offered.

Does Interactions with GSAP cost extra?

Webflow's launch note says it is available to all Webflow users at no additional cost. The same page says a paid Site plan is what unlocks publishing and hosting.

Should I switch my old site from Classic?

Not all at once. Use GSAP for new work, and move old work when you are already editing those pages. Keep Classic where you rely on a feature that is only there today.

Can I use both versions on one site?

Yes, but Webflow warns that each version loads its own resources. Its ranking from best to worst is GSAP only, Classic only, then both together. Test your own site, since results vary.

Why does my animation not show on other pages?

It is probably scoped to one page or one instance. Rebuild it inside component edit mode so it runs on all instances, or change the page scoping in the interaction's settings.

Do Webflow Interactions hurt speed?

They can if you overuse them. Stick to transforms and opacity, avoid animating many elements at once, lazy load Lottie, Rive and Spline files, and test on a real phone.

Do I need to write code for scroll animation?

Usually not. ScrollTrigger features are built into the visual panel, along with split text and staggers. Code is for behaviour the panel cannot express.