The ultimate guide to Webflow animations

What a Webflow animation actually is

A Webflow animation is a timed change to an element - its position, size, opacity, rotation, color or filter - that runs when a trigger fires. You build it in the Designer with no code, and Webflow publishes it as CSS and JavaScript on the live page. Every animation is made of two parts. The trigger says when it runs. The actions say what changes, in what order, and how fast.

Webflow groups these under Interactions. People use "interaction" and "animation" to mean the same thing, and in practice they are the same thing: an interaction is the trigger plus the animation it starts.

The trigger decides when it runs

Element triggers fire from something the visitor does to a specific element. Mouse hover, click, mouse move inside the element, and scroll into view are the ones most B2B sites use.

Page triggers fire from the page itself. Page load runs on arrival. While scrolling in view ties the animation to scroll position, so the element moves as the visitor scrolls rather than playing once.

You can apply an element trigger to one element only, or to every element with the same class. The class option is how you animate 40 cards without building 40 animations.

The actions decide what changes

Each animation is a stack of actions on a timeline. Move, scale, rotate, opacity, size, background color and filters cover almost everything. For each action you set a start state, an end state, a duration, a delay and an easing curve.

Easing is the part most people skip, and it is the part that makes an animation look built rather than bolted on. A linear fade reads as mechanical. An ease-out fade reads as natural, because things in the physical world slow down before they stop.

Where custom code fits

Webflow's Interactions panel handles the large majority of what a marketing site needs. Custom JavaScript and CSS go in page settings or an embed when you need something the panel cannot do, like an animation driven by live data. The trade-off is real. Custom code is not editable by your marketing team, it is not visible in the Designer, and it becomes someone's job to maintain. Build in the panel first and reach for code when you have a reason you can name.

When an animation is worth building

An animation earns its place when it does a job the static page cannot do. There are three jobs worth paying for.

Showing what is interactive

A button that shifts or deepens on hover tells the visitor it is a button. A card that lifts slightly tells them the whole card is clickable, not just the link text inside it. This is the highest-value animation on any B2B site, and it is usually a 200 millisecond change to one property.

Confirming something happened

After a form submits, after a filter applies, after a section expands, the visitor needs to know the click landed. A short animation on the state change answers that without a line of copy.

Making long pages readable

On a long product or pricing page, fading sections in as they scroll into view separates one idea from the next. Used once per section with a short duration, it helps. Used on every heading, paragraph and icon, it turns reading into waiting.

Where animation costs more than it returns

Decorative movement on a page where someone is trying to compare plans or find a security document is friction. If a visitor has to wait for content to arrive before they can read it, the animation is working against you. The test is simple. If removing it makes the page harder to use, keep it. If removing it only makes the page quieter, remove it.

How to build your first animation step by step

1. Pick the element and give it a class. Animations applied to a class can be reused across the site, which is the difference between a system and a pile of one-offs.
2. Open the Interactions panel from the right toolbar with the element selected.
3. Add a new element trigger and choose the event, such as mouse hover.
4. Choose the timed action for the hover-in state, then add the actions you want. Start with one, usually move or scale.
5. Set the start value and the end value, then the duration. For hover feedback, 150 to 250 milliseconds is the range that feels responsive without feeling twitchy.
6. Set the easing. Ease-out for things arriving, ease-in for things leaving.
7. Set the hover-out state so the element returns. Webflow can do this for you, but check it, because a half-reset element is the most common bug in a new build.
8. Preview, then publish to a staging domain and test on a real phone. The Designer preview is not the live page.

How to build scroll animations without breaking the page

Scroll animations come in two shapes, and choosing the wrong one is what makes a page feel heavy.

• Scroll into view plays an animation once when the element enters the viewport. Use it for fading or sliding sections in. Cheap, predictable, safe.
• While scrolling in view ties animation progress to scroll position, so the element moves in step with the visitor's finger. Use it for parallax depth and progress effects. It runs continuously and costs more, so limit it to a small number of elements per page.

Two rules keep scroll work out of trouble. Offset the start so the animation finishes before the element is fully read, not after. And never animate from zero opacity on content a visitor needs on arrival, because on a slow connection they will see an empty page.

How to keep animations from slowing the site

Animate transform and opacity first. Those two properties can be handled by the GPU, so the browser does not have to recalculate layout on every frame. Animating width, height, top or margin forces that recalculation and is where dropped frames come from.

Speed is not a side issue here, because the animation budget and the performance budget are the same budget. Only 48% of mobile websites pass all Core Web Vitals, according to HTTP Archive Web Almanac data from July 2025. Google and SOASTA found in 2017 that the probability of a mobile bounce rises 123% as load time goes from 1 second to 10 seconds. And in the Milliseconds Make Millions study from Google and Deloitte in 2020, a 0.1-second mobile speed gain brought 21.6% more users to the form submission step.

Four habits that keep animation cheap:

• Cap concurrent animations on a single screen. If six things move at once, nothing reads as important.
• Keep durations under 400 milliseconds for anything a visitor is waiting on.
• Cut or simplify heavy scroll effects at tablet and mobile breakpoints rather than letting them run everywhere.
• Audit after launch, not before. Test the published page on a mid-range phone on a normal connection. For the wider performance picture, see our guide to Webflow speed optimization and the companion guide to mobile-first Webflow development.

Making animations accessible

Some people get motion sickness from parallax and large sliding movements, and their operating system already says so through the reduced motion setting. Honor it. In Webflow you can target that preference and replace large movement with a simple opacity change, or remove it.

Beyond motion, three checks matter. Animation must never be the only signal that something is clickable, because color and movement alone fail for some visitors. Keyboard focus states need the same visible treatment as hover states, since keyboard users never trigger hover. And content hidden behind an animation must still exist for screen readers in a sensible order. More on that in our guide to UI and UX in Webflow.

How animation fits a site your marketing team can ship

The reason to build animation inside Webflow rather than in custom front-end code is editability. When the interaction lives in the Designer, a marketer can change a page without filing an engineering ticket, and the motion survives the edit.

That is where the time back shows up. M13 moved 438 pages off Contentful in 21 days, and work that used to take 3 weeks now takes 24 hours or less. Windfall Bio's site was built in just 7 days. Across client work, Ammo has seen a 30% decrease in bounce rates and a 10x increase in time to market. Those are build and publishing results, not animation results on their own, but they come from the same decision: put the page in a tool the marketing team controls.

If you are weighing a rebuild or a migration and want the motion layer designed as part of the system instead of added at the end, that is the work covered on our web design and development page.

The mistakes that show up most often

• Animating everything. When every element moves, the page has no hierarchy and the important things disappear.
• Long durations. Anything over half a second on an interactive element feels broken, not elegant.
• One-off animations with no class. Fifty hand-built interactions become unmaintainable within a quarter.
• Skipping the out state, so an element hovers up and never comes back down.
• Hiding content on load. If the fade-in fails, the content is gone.
• Testing only in the Designer. The published page behaves differently on a real device.

Find out what your current site is costing you

Before you spend a sprint on motion, it is worth knowing where the site is actually losing people. Run the free GTM audit. It models the return on fixing your site using the Forrester TEI study commissioned by Webflow, which describes a composite organization with 332% ROI over three years and $2.12M net present value, with payback in under six months. The audit risk-adjusts those benefits down 15% and caps modeled ROI at 332%, so what you get back is a conservative read on your own site, not a brochure number.

Frequently asked questions

Do Webflow animations slow down my site

They can, and whether they do depends on what you animate. Animating transform and opacity is cheap because the GPU handles it. Animating width, height or position forces the browser to recalculate layout on every frame, which is where slowdowns come from. Continuous scroll-linked animations cost more than animations that play once.

Can I build Webflow animations without writing code

Yes. The Interactions panel covers triggers, timed actions, easing, delays and scroll effects without code. Custom JavaScript is only needed for things the panel cannot express, like animation driven by live data.

What is the difference between an interaction and an animation in Webflow

An animation is the set of timed changes to an element. An interaction is that animation plus the trigger that starts it. In the Designer they live in the same panel, which is why the terms get used as if they mean the same thing.

Will animations hurt my SEO

Not directly. Animation affects SEO through page speed and usability. If your effects push Core Web Vitals out of range or delay content, that is a problem. If they are short, limited to transform and opacity, and do not hide content on load, the impact is negligible.

How do animations work on mobile

Hover triggers do not exist on touch devices, so any animation that depends on hover needs a tap equivalent or a resting state that already communicates the same thing. Heavy scroll effects should be reduced or switched off at mobile breakpoints. Always test the published page on a real mid-range phone.

Should animations respect reduced motion settings

Yes. Some visitors set reduced motion at the operating system level because large movement makes them unwell. Replace big movement with a simple opacity change for those visitors, or remove the animation.

Can my marketing team edit pages after animations are built

That is the point of building them in the Designer and attaching them to classes. Animations tied to a class keep working as content changes, so a marketer can update a page without reopening the interaction or filing a ticket.

What does a Webflow site with custom animation cost

Ammo's published project pricing starts around $10K for landing pages, and full builds run $70K-150K+. Ongoing work runs through Growth Support for companies under 100 employees, starting at $4,800 per quarter, Growth Partner for companies with 100 or more, starting at $5,200 per month, and Growth Partner+ at enterprise scale, starting at $15,000 per month. Plans are month-to-month and new client onboarding is limited to 8 per month across all plans. Pricing is subject to change.