# The Lottie Animation Block: Vector Motion Without the Heavy Files

URL: https://pro.flexablock.com/the-lottie-animation-block-vector-motion-without-the-heavy-files/
Published: 2026-07-16T01:47:18+00:00
Updated: 2026-07-17T01:15:14+00:00
Author: admin

# 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.

[Download Flexa Block](https://wordpress.org/plugins/flexa-block/)