Website Animation That Converts, and the Kind That Hurts

When a team asks me for website animation, the brief usually arrives as a feeling: "the site feels flat", "we want it to feel more premium", "can we make the hero move?" I understand the instinct. But animation on a website only earns its place when it helps a visitor understand something or do something faster. Everything else is decoration, and decoration has a weight cost, an attention cost and sometimes an accessibility cost.

So this post is about the difference. Where motion genuinely helps people get from "what is this?" to "sign me up", where it quietly works against you, and how to brief animation so it ships as a light, accessible file rather than a heavy GIF somebody regrets. I'll mention Lottie a lot, because it's what I build most days, but the principles hold for CSS and video too.

Motion should answer a question

Every useful animation I've made answers a question the visitor is already asking. What does this product actually do? Did my click work? Where should I look next? Is something still loading, or is it broken? What happens after I press this?

If you can't name the question an animation answers, that's usually the sign it shouldn't exist. That sounds strict, but it frees you up. It means you can put real craft into the four or five animations that matter instead of spreading effort across thirty that nobody will miss.

A quick test I use with clients: turn the animation off in your head and ask what the visitor loses. If the answer is "they'd have to read three lines to understand the workflow", keep it. If the answer is "the icons wouldn't bounce", let it go.

Where website animation earns its keep

The hero that shows the product working

The biggest job animation can do on a marketing page is replace a paragraph of description with a few seconds of demonstration. A looping illustration of your core workflow, a document becoming a report, a queue collapsing into one click, lets a visitor understand the product before they've read your headline twice. For software this often works better as simplified, illustrated UI than as a screen recording, because it stays readable at small sizes and survives your next redesign.

Empty states and first-run moments

An empty dashboard is the loneliest screen in any product, and it's the one every new user sees first. A small, well-timed animation that shows what the screen will look like once there's data, or points at the one button to press, turns a dead end into an instruction.

Feedback: loaders, toggles and success

Micro-interactions are where motion is most clearly functional. A button that visibly responds, a toggle that slides rather than snaps, a success tick after a form submits: each one confirms that the thing the person did actually happened. Our rule of thumb is to keep these short, a fraction of a second, because feedback that makes someone wait is no longer feedback.

Explaining steps in onboarding

Three-step onboarding with a small animation per step is often more effective than a tooltip tour, because the motion shows the action instead of describing where to click. Each animation needs to be a separate, lightweight file triggered by the step, not one long timeline.

Where animation quietly costs you

This is the part people don't brief for, and it's where most of the damage I'm asked to fix comes from.

• A heavy hero asset. An autoplaying GIF or MP4 at the top of the page that makes it slower to load and still looks soft on a high-density screen. I've written separately about choosing between Lottie, GIF and video; the short version is that GIF is almost never the right answer for illustrated motion.
• Animation that delays the content. Headlines that fade in word by word, sections that stay invisible until you scroll past a trigger. They look nice in a design review and make a real visitor wait.
• Scroll-jacking. Taking control of the scroll to run a sequence. It can work for a single, well-built story section. Across a whole page it mostly annoys people.
• Everything moving at once. Five looping illustrations on one screen compete with each other and with your call to action. Attention is the budget, and motion spends it fast.
• Ignoring reduced motion. Some visitors set their operating system to reduce motion because it makes them feel unwell. The prefers-reduced-motion media query tells your site that, and respecting it is an accessibility requirement, not a nice-to-have.

Matching the animation to the job

Here's the cheat sheet I share with product and marketing teams at the brief stage. It saves a surprising amount of back-and-forth.

Lottie sits in most of those rows because it's a vector animation stored as JSON: it stays sharp on any display, supports real transparency, and your code can play, pause or scrub it. It is not the answer for photographic content, heavy blur, grain or particle effects. That's video's job, and I'll tell a client so rather than force it.

Two quick scenarios

Picture a WordPress plugin company whose landing page leads with a large GIF of the settings screen. It's slow, it bands in the gradients, and the text in the UI is unreadable on a phone. The fix isn't "make the GIF smaller". It's rebuilding that moment as a simplified illustrated loop, a few seconds long, with the two settings that matter highlighted, exported as Lottie with a static poster for anyone who has reduced motion on. Same message, a fraction of the weight, and it's sharp everywhere.

Now a small SaaS team whose trial users sign up and land on an empty project list. Nothing on that screen tells them what to do. Three small animations, one for the empty state, one for the first-project success moment, one for the onboarding checklist, each triggered by a state change in the app, do more for that first session than any hero redesign would.

Who this is for, and who it isn't

Animation is worth commissioning if you have a clear message and a product people need to see working, or an app where key moments currently feel default. It's also worth it if you're carrying a heavy hero GIF or video that you suspect is dragging the page down.

It isn't the fix if your page doesn't yet know what it's saying. Motion amplifies a clear message; it can't create one. And if your brand needs mood rather than explanation, a short animated logo reveal or brand motion set might serve you better than UI animation.

How we build Lottie and web motion

At Degird the animation isn't usually the hard part. The handoff is. A lot of web animation dies between After Effects and production: effects that don't export, files that stutter on a mid-range phone, or a JSON blob dropped in Slack with no note on how to use it. So our Lottie and web motion service is built around that gap.

1. Placement and constraint brief. Where it lives, what triggers it, and what can't survive the export, flagged before anything is designed.

2. Styleframes and motion direction. Stills in your illustration style, plus notes on easing, timing and what loops.

3. Built Lottie-native. Shape layers and trim paths rather than effects, with layer names written for the engineers who'll target them.

4. Export, optimise, test. Unused layers removed, keyframes and path points thinned, then played back in both SVG and canvas renderers and checked on a throttled mobile profile.

5. Handoff. You receive an optimised .json, a .lottie (dotLottie) bundle, a static SVG or WebP poster for the reduced-motion fallback, the After Effects source, and a README covering player, renderer, lazy-loading and loop behaviour for your stack, whether that's React, Webflow or WordPress.

On price, I'd rather be straightforward than invent a cheap tier. Lottie work is mostly bought on the $2,450/mo monthly retainer, where a single animation typically comes back in about 48 hours, one request at a time; or as a scoped one-off project, usually 7 to 10 days. Among the fixed-price packages, it's included in the Full-Funnel Bundle from $2,900. The pricing page explains which model suits which kind of team.

Frequently asked questions

Does website animation actually improve conversion?

It can, when it helps people understand the product or confirms that an action worked. It can also hurt, by slowing the page or distracting from the call to action. Nobody can promise a lift in advance. What you can do is make every animation answer a real question and keep it light.

Is Lottie good for website performance?

For illustrated and vector motion, generally yes, because a Lottie file's size tracks its complexity rather than its duration or pixel dimensions. It still needs an optimisation pass, lazy loading, and pausing when off screen. A badly built Lottie can stutter just like any other asset.

How long should a UI micro-interaction be?

Short enough that it never feels like waiting. For button feedback, toggles and hovers we usually aim for well under half a second. Longer animations belong in places where the visitor is watching on purpose, like a hero or an onboarding step.

Can you add Lottie animations to a WordPress or Webflow site?

Yes. Webflow has a native Lottie element that takes a hosted JSON file, and WordPress usually uses a Lottie block or a small script for the dotLottie player. We include the snippet for your stack with every delivery.

What happens for visitors who turn off animations?

They should see a static frame that still makes sense. Every animation we deliver comes with a poster image taken from its resting frame and the code to check prefers-reduced-motion before autoplaying.

The takeaway

Good website animation answers a question: what does this do, did that work, where do I go next. Build a handful of those well, keep them light, give everyone a static fallback, and resist animating everything else. That's how motion ends up helping the page instead of competing with it.

If you have a hero, an empty state or an onboarding flow that needs to move, see how we scope and deliver Lottie and website animation, or compare our packages and retainer options. If your hero really needs a narrated product demo rather than a loop, a SaaS explainer video may be the better fit. Either way, send us the page and what it should do and we'll tell you which animations are worth building first.