Media · Gutenberg
Lottie Animation block for WordPress
Play a Lottie JSON animation with trigger modes: autoplay, hover, click or scroll.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Play a Lottie JSON animation with trigger modes: autoplay, hover, click or scroll.
Inspector panels on this block: Animation Source, Playback, Size & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Lottie JSON URL” (Enter the URL of a Lottie JSON file (e.g. from LottieFiles.com)); “Play Trigger” options: Autoplay, On Hover, On Click, On Scroll into View; “Direction” options: Forward, Reverse; “Size & Layout — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Media → search “Lottie Animation” (block name `blockenberg/lottie` in block.json). Style it in the sidebar after insert.
How to use Lottie Animation block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Lottie Animation”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Animation Source. Set “Lottie JSON URL”, “Play Trigger”, “Loop”, “Speed”.
- Check the published page. The view script reads HTML data attributes: data-direction, data-keep-frame, data-loop, data-speed, data-trigger. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Lottie JSON URL | Text field in the inspector. Enter the URL of a Lottie JSON file (e.g. from LottieFiles.com). Saved as `lottieUrl`. |
| Play Trigger | Select control; the chosen value is saved on the block. Options: Autoplay; On Hover; On Click; On Scroll into View. block.json default: autoplay. Saved as `playTrigger`. |
| Loop | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Speed | Numeric range control in the inspector. Range 0.1–4. block.json default: 1. Saved as `speed`. |
| Direction | Select control; the chosen value is saved on the block. Options: Forward; Reverse. block.json default: 1. Saved as `direction`. |
| Freeze on Last Frame | On/off toggle in the inspector. Off by default. Saved as `keepLastFrame`. |
| Full container width | On/off toggle in the inspector. Off by default. Saved as `autoWidth`. |
| Width (px) | Numeric range control in the inspector. Range 80–1200. block.json default: 400. Saved as `width`. |
| Auto height (preserve ratio) | On/off toggle in the inspector. On by default. Saved as `autoHeight`. |
| Height (px) | Numeric range control in the inspector. Range 80–1000. block.json default: 400. Saved as `height`. |
| Size & Layout — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `borderRadius`. |
| Padding (px) | Numeric range control in the inspector. Range 0–80. block.json default: 0. Saved as `padding`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-direction, data-keep-frame, data-loop, data-speed, data-trigger.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Play a Lottie JSON animation with trigger modes: autoplay, hover, click or scroll — that is the job of Lottie Animation, not a generic content block.
- Use it when you need the editor control labeled “Lottie JSON URL”, which exists on this block’s inspector.
- It matches pages about lottie, animation, motion.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Lottie Animation block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Lottie Animation”. It sits under Media. After insert, open Animation Source and set “Lottie JSON URL”, “Play Trigger”, “Loop”, “Speed”.
What makes Lottie Animation different from other Blockenberg blocks?
Play a Lottie JSON animation with trigger modes: autoplay, hover, click or scroll. Inspector labels on this block include “Lottie JSON URL”, “Play Trigger”, “Loop”, “Speed”.
Is the Lottie Animation Gutenberg block free?
Yes. Lottie Animation ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Lottie Animation to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Animation Source, Playback, Size & Layout).
Related media blocks
Audio Player
Custom-styled audio player with cover art, track info, and branded controls. Perfect for podcasts and soundclips.
Background Video
A looping autoplay background video section with overlay and InnerBlocks content — distinct from video players or popups.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Before/After Slider
Compare two images with a draggable slider handle.
Device Mockup
Display a screenshot or image inside a realistic device frame — phone, tablet, laptop, or browser window.
Embed / iFrame
Responsive iframe embed for Calendly, Typeform, Google Forms, Airtable, YouTube, Vimeo, or any URL. Full aspect-ratio control and loading options.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Lottie Animation from the Gutenberg inserter.