Static pages feel static. A single well-placed animation — a progress ring, an opening door, a phone that comes to life — turns a flat section into something a visitor actually watches. The Lottie widget for Elementor brings that motion in the lightweight, resolution-independent way designers prefer: small JSON animations that render as crisp vectors at any size. Sentio built the Lottie widget so editors can drop production-grade motion onto a page without touching a line of JavaScript or shipping a heavy video file.
What Is the Lottie Widget?
The Lottie renders JSON-based animations exported from After Effects via Bodymovin, or any animation from a service like LottieFiles. Point it at a media file or an external URL, choose how the animation should play, and the Elementor Lottie handles the rendering, sizing, and playback. Because the format is vector JSON rather than a video, the same animation stays razor sharp on a retina display and still weighs a fraction of an equivalent GIF or MP4.
Key Features of the Lottie Widget
- Six playback triggers — play on viewport entry, on click, on hover, scrubbed by scroll position, or follow the cursor, plus a manual none mode.
- Full playback control — loop with a set play count, adjust speed, reverse, and set custom start and end frames to play just part of an animation.
- SVG or canvas rendering with optional lazy loading, so heavy animations only load when they are needed.
- Style controls — width, max-width, opacity, and CSS filters, each with a separate hover state for interactive effects.
Why Use the Lottie Widget on Your Site?
Motion guides attention, and the right trigger makes it feel intentional rather than noisy. The Lottie widget exists because a bank, a productivity app, and an estate agent each want motion to behave differently. A digital bank can run an online-banking scene that plays the instant it scrolls into view and loops quietly behind the headline. A productivity app can pair a blog animation that plays on hover with a downloading-progress loop that fires on click, the kind of micro-interaction a modern product is built on. An estate agent can tie an opening-door animation to the scroll bar itself, so the door swings open frame by frame as the visitor moves down the page. Each Elementor Lottie respects reduced-motion preferences, lazy-loads on demand, and renders as sharp vectors on any screen.
Getting Started With Lottie in Minutes
Install Sentio Addons, upload a Lottie JSON file to your media library or paste an external URL, and drop the widget onto the page. Pick a trigger — viewport, click, hover, scroll, or cursor — then set looping, speed, and the start and end frames. Use the Style tab to size the animation, set its opacity, and add hover filters. Switch on lazy loading for animations below the fold, and the widget is ready. Duplicate it anywhere a section needs a spark of motion, and reuse the same JSON file as often as you like — each Lottie widget plays independently, with its own trigger, speed, and frame range.
See the Lottie Widget in Action
The widget page above this article shows three distinct examples built from four real animations: a navy digital-bank hero that autoplays on viewport entry, a vibrant productivity-app pair that plays on hover and on click, and a minimal estate-agent door that opens as you scroll. Same widget, same Style tab, four animations, three completely different behaviours. Each one was placed in under a minute, and none of them required a single frame of custom code.
Good motion is the difference between a page that informs and a page that holds attention. Reach for the Lottie widget for Elementor and you add that motion without the weight of video or the cost of custom code. Sentio Addons keeps shipping practical, design-system-friendly widgets like this because publishing teams need real tools, not toy components.