How do I add a Lottie animation to my website?

Add the OneType Transforms script tag to your site, then place a div with ot="lottie" and ot-path pointing to your Lottie JSON URL. The animation loads and plays automatically - no JavaScript code needed.

Is Lottie better than GIF for web animations?

Yes. Lottie files are vector-based, typically 10-20x smaller than GIFs, scale to any size without quality loss, and render as crisp SVG. A 2MB GIF might be just 30KB as a Lottie JSON file.

Can I trigger Lottie animations on scroll?

Yes. Set ot-trigger="scroll" on the element. The animation plays when it enters the viewport and pauses when scrolled out. Add ot-loop="false" to play once and stop.

Where can I find free Lottie animation files?

LottieFiles.com is the largest source with thousands of free animations. Browse by category, preview them, and copy the JSON URL. Other sources include IconScout and LottieFlow.

Does the OneType Lottie transform work on Webflow and WordPress?

Yes. OneType Transforms works on any website platform - Webflow, WordPress, Shopify, Squarespace, Framer, or plain HTML. Add the script tag and use the ot attribute on any page.

Lottie Animation - How to Add One to Any Website