Animations & interactions (overview)

An introduction to Webflow Interactions — the animations and motion effects on your site and what you need to know about them as a client.

Webflow Interactions power the animations and motion effects on your site — elements that fade in as you scroll, buttons that change on hover, and transitions between states. This guide explains what they are and what to expect.

Quick summary

Webflow Interactions are animations built into your site's design by Chykalophia. They make elements move, fade, or change in response to scrolling, clicking, or hovering. As a client, you don't need to manage interactions — but understanding what they are helps when something looks unexpected.

What are Webflow Interactions?

Interactions are programmed behaviors that make your website feel dynamic and polished. Common examples include:

Scroll animations — elements that fade in or slide in as you scroll down the page
Hover effects — buttons or cards that change color or size when a mouse hovers over them
Click triggers — menus or modals that open when clicked
Page load animations — elements that animate in when a page first loads
Parallax effects — background layers that move at different speeds as you scroll

These are built in Webflow's Interactions panel, part of the design tools. They're part of your site's design — not content you manage.

Two types of interactions

Webflow currently offers two versions of its interactions tool:

Interactions with GSAP — the current version, launched in summer 2025 and the default on new sites. Each interaction has a trigger (such as a click, hover, scroll, or page load), a target (the elements it affects), and the actions that run.

Classic Interactions — the previous version, which some sites still use. It is built around triggers on individual elements (hover, click, scroll into view) and triggers on the whole page (page load, page scroll).

Both are created by Chykalophia. They're design settings, so the Content editor role can't change them.

What this means for you as a client

You generally don't need to interact with Webflow Interactions at all. They just work.

However, knowing about them is useful when:

Something looks different while you're editing. Animations may not play the way they do for visitors while you're making changes. Use Preview (the play icon in the top bar), or check the published site, to see interactions in action.
You're requesting a change. If you want to modify or add an animation (e.g., "Can we make this section slide in slower?"), it's helpful to describe what you're seeing and what you'd like instead.
An animation looks broken. If an element is stuck mid-animation, invisible, or behaving oddly, contact Chykalophia — this is usually a quick fix.

Interactions and performance

Interactions with GSAP runs on the GSAP animation engine, and Webflow says it gives smoother performance than the older version. Each version of Webflow interactions loads its own code, so a site that uses both versions will be slower than one that uses just one. Beyond that, performance depends on how the animations are built, which is why Webflow recommends testing each site.

Chykalophia designs interactions with performance in mind. If your site's speed score is affected by animations, we'll advise on adjustments.

Interactions on mobile

Hover effects don't translate well to touchscreens, because most phones can't hover the way a mouse can. Chykalophia designs interactions to either degrade gracefully on mobile or use alternative touch-based triggers.

If you see an animation that works on desktop but doesn't seem to work on your phone, that's often intentional. Let us know if you'd like a mobile experience that's different.

Lottie animations

Some Webflow sites use Lottie — a format for vector animations. Webflow accepts Lottie JSON and dotLottie files (and Rive animation files) in the Assets panel. These are commonly used for custom icons and illustrations that animate. Lottie files are created by designers and embedded by Chykalophia.

Common questions

An animation on my site is broken — something is stuck or invisible.

Screenshot or record the issue and send it to Chykalophia with the URL and the section where the problem appears. These fixes are usually quick.

Can I turn off animations on the site?

Not with the Content editor role. Interactions are design-level settings. If you want animations reduced or removed, ask Chykalophia.

My site animations look fine on desktop but strange on mobile.

Interactions can be set to behave differently at each screen size (Webflow calls these breakpoints), including not animating at all on phones. Send us a screenshot or recording and we'll investigate.

Does Webflow respect 'reduce motion' accessibility settings?

It can. Interactions with GSAP has settings that respect a visitor's reduced-motion preference (the prefers-reduced-motion setting on their device); Classic Interactions doesn't have these settings. Webflow's built-in smooth scrolling already respects the preference. If accessibility for motion-sensitive visitors is a priority, ask Chykalophia to ensure this is configured.

Need a hand?

If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.