The Lottie Animation Block: Vector Motion Without the Heavy Files

Play crisp vector animations right on the page — pick a play trigger, speed, loop and direction in the sidebar, and watch it move as you edit.

The section that always stayed flat

You wanted a little motion on the page — a looping illustration in the hero, a small animated icon next to a feature. But the choices were never great: a chunky GIF that looks fuzzy and weighs a megabyte, an autoplaying video that feels like overkill, or asking someone to wire up a script. So more often than not, the section just stayed still.

The Lottie Animation block plays real vector animations — the small JSON and .lottie files designers export from tools like After Effects — right inside your page. They stay sharp at any size, weigh a fraction of a video, and you place one the same way you drop in any other block.

Autoplay, looping. This one starts the moment the page loads and repeats on its own — the everyday setting for an ambient illustration.

What you actually control

Once the animation is in, everything else is a toggle or a slider in the sidebar — no file editing, no code:

Play trigger: start on load, on hover, on click, or only when the animation scrolls into view — so the motion arrives when the visitor is actually looking.
Speed and direction: speed it up for a snappy loop, slow it down for a calm one, or run the whole thing in reverse — without touching the file.
Loop or play once: keep it looping for an ambient illustration, or let it play through a single time for an intro flourish that then rests.
Any source: upload a .json or a .lottie file, or paste a hosted URL — both formats play the same, no conversion step.

Setting one up takes about a minute. Drop the block in, pick your file, choose a play trigger, and it plays right there in the editor as you tweak — the same loader runs the preview and the front end, so what you lay out is what ships. And it comes with the usual per-device width, height, alignment and spacing controls, so it fits your layout instead of fighting it.

Same file, four different behaviours

The animation itself never changes — only the playback settings do. Here is the same block, three more ways:

Plays on hover. This one waits — it only animates while the pointer is over it, so nothing moves until the visitor reaches for it.

Half speed, reversed. The same file, slowed to a calm pace and running backwards — a different mood from one JSON, with no re-export.

Plays when it scrolls into view. This one holds on its first frame until it enters the screen, then plays through once — a reveal that fires exactly when it is seen.

Add a bit of motion to your next page

The Lottie Animation block ships with Flexa Block. Install it, and it’s waiting in the editor the next time you open a page — with your JSON and .lottie files playing live as you build.

More articles

Keep reading

Other guides from the Flexa Blocks library.

48 posts found