TL;DR

• How to make animated illustration work: rebuild the artwork as separate vector layers, animate two or three properties only, and export to Lottie or animated SVG rather than GIF.
• Format choice dominates everything else. In one published comparison the same animation was 2.6 KB as Lottie against 847 KB as a GIF — a 97% reduction.
• GIF is raster, so it also degrades when scaled, while Lottie and SVG stay sharp at any size.
• Animate position, scale and opacity. Those three cover most illustration motion and are the cheapest properties to render.

Most animated illustration fails in one of two ways: it moves too much, or it weighs too much. Both are decisions made before any keyframe is set.

A static illustration becomes an animation the moment its parts can move independently. That means the real work is structural — separating the artwork into layers — not choosing easing curves.

Here is what to animate, how to keep it light, and which format to ship.

Decide what earns motion

Animation is expensive in attention. Every moving element competes with the text around it, so the useful question is what the motion is for.

• Explain a sequence — showing a process in order rather than all at once.
• Direct attention — one small movement pointing at the thing that matters.
• Confirm an action — interaction feedback under one second.
• Establish character — ambient loops that carry brand personality.

If a proposed animation does not fit one of those four, it is decoration, and decoration that costs page weight is a bad trade.

The first case — explaining a sequence — is usually better served by a static diagram than by motion. Compare against how to visualise a workflow in 5 steps before animating anything.

Prepare the illustration first

This is the step that determines whether animating is straightforward or miserable.

• Separate into layers — anything that moves independently needs to be its own named group.
• Name everything properly. "Group 47" becomes unusable once there are thirty layers.
• Set sensible anchor points. A rotating arm rotates around its joint, not its bounding-box centre.
• Expand strokes to outlines so line weights stay stable through scaling.
• Flatten what never moves into a single background layer.

A well-layered illustration animates in an afternoon. A single flattened shape cannot be animated at all without being rebuilt.

This is why animation work starts in vector. Building the artwork from primitives keeps every part separable from the outset — see how to make vector illustration files.

Animate three properties, not ten

Position, scale and opacity account for most illustration motion, and they are also the properties browsers handle most efficiently.

• Position — entrances, drifting, bouncing.
• Scale — emphasis, pulsing, appearing.
• Opacity — fades and sequenced reveals.
• Rotation — use sparingly; it reads as playful very quickly.

Path morphing and masking are available in Lottie but expensive in both file size and authoring time. Reach for them only when the animation genuinely depends on a shape changing.

Flat artwork animates most cleanly, because solid fills have no texture to distort as shapes move — the style rules are in how to create flat illustrations.

Four rules that make motion feel right

• Never animate linearly. Nothing in the physical world starts and stops at constant speed. Ease everything.
• Overlap the timing. Elements that start together look mechanical. Offset each by 50 to 100 milliseconds.
• Move along arcs. Straight-line motion between two points reads as robotic.
• Keep it short. Interaction feedback under 300 milliseconds; ambient loops two to five seconds.

Choosing a format

The gap between Lottie and GIF is not marginal. The same animation measured 2.6 KB as Lottie and 847 KB as a GIF, and even counting the roughly 60 KB player library — cached once across the whole site — the total stays far below the GIF.

Because GIF is raster it also loses quality when scaled, which vector formats do not. Given that images already account for roughly 50% of a typical page's weight, this is the highest-leverage decision in the whole process — see SVG vs PNG for web illustrations for how the raster and vector trade-off plays out more broadly.

Handing animation to a developer

Most animated illustration breaks at handoff rather than in authoring. A Lottie JSON dropped into a ticket with no context tends to ship at the wrong size, in the wrong place, looping when it should play once.

What a developer actually needs alongside the file:

• Trigger — does it play on load, on scroll into view, on hover, or on a state change?
• Loop behaviour — play once, loop forever, or loop a fixed number of times.
• Intended display size and whether it should scale with its container.
• The static fallback for reduced-motion users, exported as a real file rather than described.
• Segment markers if only part of the timeline should play for a given state.

Write those five lines into the ticket and the implementation usually lands first time. Leave them out and you will review it three times.

Test on the worst device you support

Animation performance degrades unevenly. A loop that is smooth on a laptop can stutter badly on a mid-range phone, and stutter reads as broken rather than as slow.

• Throttle the CPU in browser devtools and watch the frame rate, not the animation.
• Count simultaneous animations. Several Lottie players on one screen is the usual cause of jank.
• Check it on battery saver, where some browsers throttle timers aggressively.
• Watch total blocking time — parsing a large JSON on the main thread delays interactivity.

Respect people who do not want motion

Some readers get motion sickness or migraines from movement, and operating systems expose that preference. Honouring it is two lines of CSS.

• Wrap non-essential animation in a prefers-reduced-motion media query.
• Provide a static fallback — the first frame, or a meaningful still.
• Never animate anything essential. If the meaning only exists in the motion, the still version loses information.
• Avoid infinite loops near text, which make reading measurably harder.

This is not an edge case worth deferring. Vestibular disorders are common, and the media query costs nothing to add while the artwork is still open in front of you. Retrofitting it across a whole site later is a much larger job.

Where Illustrations AI fits an animation

On the generation step specifically: a generator will not hand you an animatable file, and it is worth saying so plainly. Output is flat raster with no separable layers.

What it does remove is the design decision. Generate the composition, palette and style in under 20 seconds, confirm the static version actually works, then rebuild just that one design in layers. You skip the blank canvas and the art direction, and only pay for the vector rebuild you were always going to need.

Keeping one locked style also matters here: an animated illustration usually sits beside static ones on the same page, and they have to match. The wider method is in how to make illustrations, with wording patterns in 60 AI illustration prompts.

Layer first, then move

Separate the artwork, animate three properties, ease everything, and export to Lottie or SVG. That order keeps the file small and the motion purposeful.

Animation cannot rescue an illustration that does not work standing still — so get the static version right first.

A useful discipline when starting out: animate one element per illustration. One shape that moves in an otherwise static scene reads as intentional and costs almost nothing in weight or attention.

Once that single movement is working — eased, arced, correctly timed — add a second only if you can say what job it does. Most illustration animation that feels cheap is simply doing too much at once, and the fix is subtraction rather than better easing curves.

The formats reward that restraint too. Fewer moving layers means a smaller JSON, faster parsing, and less chance of stutter on the mid-range phone where most people will actually see it.

Generate the base illustration free — under 20 seconds per option, full commercial rights, no credit card required.