Lottie Animation: animate more, animate differently

Lottie animation came to Readymag: simply add Lottie as a widget, tailor it to your taste—and go double interactive.

readymag blog_lottie animation

Now you can add Lottie animations to your websites as a widget, smoothly control them, and mix them with Readymag’s native animations to make your websites even more interactive.

What Lottie is, and why it’s powerful

Lottie is an open-source vector animation format that can be simply embedded into a website, skirting low-resolution, short and bulky GIFs.

Dynamic Lottie animations are a game-changer, as they’re lightweight, scalable, and easy to create:

  • Lottie maintains high image quality, is 6x smaller than the average GIF, and loads 10x faster.
  • Since Lottie animations use vector graphics, you can fit them to different screen sizes and resolutions without them falling into pixels.
  • You can craft your own Lottie animation in Adobe After Effects and Figma with dedicated plugins, or native Lottie Creator, or find pre-made animations that fit your goals.

Adding and tuning your Lottie animation

Lottie is available on Personal, Freelancer, Studio, and Business plans. To chip in a Lottie animation, add Lottie Widget and upload a .json, or .lottie file, or paste in an asset link.

You can play your Lottie on Load, Scroll, Hover, Cursor move, Click and Hold, and combine multiple triggers. Also, the widget controls allow you to decide playback speed, loop your animation, crop the timeline, set playback direction, add a delay, and flexibly tweak your Lottie in many other ways.

readymag blog_lottie controls
Animation and Interaction controls for Lottie widget

The Lottie widget is just like any other widget in Readymag—you can animate it, too. Combine the Lottie with Readymag’s native animations, play around with them, and find your unique blend.

0:00
/0:32

If something about Lottie animation is unclear, you can always hit us up at support@readymag.com for help.