Play Lottie JSON animations on load, scroll, hover or click
Lottie Animation plays a Lottie JSON file from your media library or from an external URL. You choose what starts it: page load, entering the viewport, hover, click, or the visitor's scroll position. Use it for animated icons, illustrations and scroll-driven visuals.
Play a looping illustration next to the main heading when it comes into view.
Set the hover area to the parent column so the icon plays when the whole card is hovered.
Tie the animation to the scroll position so it advances as the visitor moves down the page.
Let visitors start and pause an animation themselves with a click or the keyboard.
What you need: A Lottie animation in JSON format, either uploaded to the media library or hosted at a URL that allows cross-origin requests. A demo animation is built in.
Set Source to Media File (JSON) and use Upload JSON File. Administrators can upload .json files. You can also paste an external JSON URL, or use the built-in demo animation.
The host of the JSON file must allow cross-origin requests (CORS). If it does not, upload the file to your own media library instead.
Yes. Set Play When to Scroll Controlled, then choose While Crossing the Viewport or Whole Page Scroll in Scroll Effect Range.
SVG is the default and the sharpest. Canvas is the fastest choice for complex files.
Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.