Play a Lottie animation (.json) when it scrolls into view, on hover, on click or tied to the page scroll. It comes with Bright Addons Blocks Pro, which also includes every free block.
Live demo
This is the block itself with its starting settings. Change any of them in the block sidebar.
What you can set
The Lottie Animation Pro block has 4 settings panels. No code needed.
Set source, Lottie JSON file, JSON file address, Description for screen readers, Caption, Link (optional) and Open link in a new tab.
Set play when, When the mouse leaves, Scroll range, Loop, Number of loops (0 = forever), Speed, Play in reverse, Start point (%), End point (%) and 2 more settings.
Set width (px), Alignment and Flip horizontally.
Set 1 color setting.
How to use it
Settings
The full list, panel by panel, is in the Lottie Animation Pro guide.
| Setting | What it does | Choices |
|---|---|---|
| Source (Animation) | Choose one. | Demo animation, Media library (.json), Link to a file on this site |
| Lottie JSON file (Animation) | Administrators can upload .json files. Free animations: lottiefiles.com. | – |
| JSON file address (Animation) | Must be a file on this website, for example /wp-content/uploads/animation.json. | – |
| Description for screen readers (Animation) | Leave empty for decorative animations. | – |
| Caption (Animation) | Text you type. | – |
| Link (optional) (Animation) | Link address. | – |
| Open link in a new tab (Animation) | On or off. | – |
| Play when (Playback) | Choose one. | The page loads, It is visible on screen, On hover, On click, Tied to scrolling |
| When the mouse leaves (Playback) | Choose one. | Pause, Play in reverse, Back to the start, Keep playing |
| Scroll range (Playback) | Choose one. | While it crosses the screen, The whole page |
| Loop (Playback) | On or off. | – |
| Number of loops (0 = forever) (Playback) | A number. | – |
| Speed (Playback) | From 0.1 to 5. | – |
| Play in reverse (Playback) | On or off. | – |
Questions
Lottie Animation Pro is a Pro block. It comes with Bright Addons Blocks Pro, which has the same plans and prices as Bright Addons Pro for Elementor and includes all 62 free blocks.
No. It is a block for the WordPress block editor (Gutenberg). Elementor is not needed. If you use Bright Addons Pro for Elementor on the same site, both plugins work side by side.
No. Each block loads only its own small CSS and JavaScript, and only on pages where it is used. Blocks you do not need can be switched off in Bright Blocks.
Yes. The blocks work with block themes and classic themes, and follow your theme fonts. Wide and full width alignment are supported.
More blocks
Bright Addons Blocks
Blocks Pro has all 99 Pro blocks, the 62 free blocks, Pro effects for every block, Theme Templates and popups.
Yearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.
