Lottie Animation
Add lightweight animations that bring a section to life.
Lottie animations from a link or the media library — play on load, hover, scroll, click or follow the scroll, with loops, speed, segments, a play/pause button, a poster, lazy loading and a still frame for reduced motion.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Lottie Animation — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
Animation
| Setting | What you can set |
|---|---|
| Source | url or media |
| Link | Text |
Playback
| Setting | What you can set |
|---|---|
| Play | load, hover, scroll, click or scrub |
| Loop | On / off |
| Number of loops (0 = endless) | 0–20 |
| Speed | 0.1–5 |
| Play backwards | On / off |
| Start frame | 0–600 |
| End frame (0 = last) | 0–600 |
| Renderer | svg or canvas |
| When the pointer leaves | reverse, pause, stop or continue |
| Play once only | On / off |
| Start when the top reaches (% from the bottom) | 0–100 |
| Finish when the bottom reaches (% from the bottom) | 0–100 |
| Load when it comes near the screen | On / off |
| Play / pause button | On / off |
Reduced motion and fallback
| Setting | What you can set |
|---|---|
| For visitors who prefer less motion | first, last or play |
| Accessible description | Text |
Size and link
| Setting | What you can set |
|---|---|
| Width (px, 0 = full width) | 0–1200 |
| Alignment | left, center or right |
| Open in a new tab | On / off |
| Background | Colour |
| Corner radius (px) | 0–60 |
Styles tab: spacing, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- .lottie (dotLottie, zipped) files are not supported; use the JSON export.
- JSON links on another domain need CORS headers.
- The demo's animation links point at the dev workspace's build folder (as in earlier batches). On a customer site, the patterns use the installed plugin's own assets/art URLs.
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
Related
- Works well with: Advanced Slider, Animated Heading, Animated Icon.