How to: adding Lottie and Rive animations to Readymag

Animation is one of the most essential assets in the Readymag toolkit. You can add life and movement to any element, such as text, images, and shapes, right inside the editor with versatile native animations. But sometimes you need something else: tiny, lightweight vector graphics or more nuanced animation behavior. That’s where Lottie and Rive come in.

Read this piece to get familiar with both tools, their strengths, limitations, and ways to use them in Readymag. You’ll also gain a fresh perspective from real-world examples.

Lottie: easy-to-add tiny elements

Lottie is a lightweight animation format that renders vector graphics directly in the browser. Lottie animations are resolution-independent, quick to load, and widely supported. Such animations are usually designed with Adobe After Effects and exported with the Bodymovin plugin. Still, you can also create and edit Lottie files directly with browser-based tools like the native Lottie Editor, or export them from Figma using a plugin.

Readymag Lottie Integration’s biggest strength is its sync with user behavior. Unlike videos, which just play or pause, Lottie animations can respond to scroll, hover, or click. That opens up a wide range of interactions, from subtle feedback to dynamic storytelling.

How to add Lottie to Readymag: In Readymag, uploading a Lottie takes just a few clicks with the dedicated widget. First, add the Lottie widget. Then, upload a .json or .lottie file or paste a link from a hosting platform like LottieFiles. Voila, your animation is already in the Editor. 

From there, you can further choose how it behaves: you can play your Lottie on page load, hover, click, or scroll, set a motion delay or loop playback, trim the timeline, control the speed, or link playback to a trigger from another widget.

Rive: fully responsive animation scenes

Rive is an all-in-one desktop tool for creating light vector-based animations, setting motion logic for them, exporting or embedding the results, and rendering them in real time.

Rive differs from Lottie in the way it operates: it uses state machines instead of a fixed timeline. A state machine is a programming concept that Rive adapts for designers. It lets your animation switch between states based on user interaction. Each state is a different version of the animation, such as idle, hover, or clicked, and the lines between them are called transitions. Transitions define when and how the animation switches from one state to another. For example, you can create a character that will blink when idle, wave when hovered, and jump when clicked, and it’ll all work within one file. You define each state visually, connect them with rules, and test the interactions live in Rive’s editor. Also, Rive has Audio Events, which means designers can add user-triggered sounds to their animations for more fun and functionality.

How to add Rive to Readymag: Once your animation is ready, go to the Export settings, click on the Sharing link, and choose the artboard, animation, or state machine you want to share. Copy the Embed code Rive gives you. Then, add the Code widget to your Readymag project, and paste this code into it. After that, you can also chip in native Readymag animations on top of your Rive interactions.

Lottie vs. Rive: what to use

Your choice of tool here depends on what you want your animation to do. Lottie and Rive complement each other—one is great for simple, polished playback, and the other for advanced, reactive motion. In Readymag, you can use both tools, but Lottie has a special integration that allows you to configure its behaviour. In contrast, Rive can be added just as an embed, which means all interactions happen only within this embed.

Lottie is great when you need responsive motion with minimal setup: for icons, micro interactions, and looping visual elements that need to look sharp across devices. It’s also your tool if you don’t want to write or embed a single line of code or delve into state machine logic. For those who already use Figma or After Effects, getting started with Lottie is quick and intuitive.

LottieFiles, a native Lottie editor, offers a Free plan that lets you design up to 10 animations before requesting an upgrade. Features like optimization, format conversion, collaboration, and hosting are available on paid plans only. However, you can create your own Lottie animation in Adobe After Effects or Figma and export it wherever you need to.

Rive comes to the stage if your animation needs to respond to users’ data in real time, you have a distinct behaviour logic in mind, are comfortable working with state machines, bones, and meshes, and don’t mind writing a few lines of code.

Rive takes vector-based animation further than Lottie: alongside basic transforms, the editor lets you work with bones, groups, meshes, and vertices, making it especially strong for character animation or motion that feels closer to cartooning. For example, you can assemble the logic of your structure using bones—levers connected by joints—and tweak them any way you want. Then, add some “flesh” over the bones, which will move according to the bone logic. After that, you’re free to add any objects to the skeleton and connect them with a designated bone, so that the additional object will also move as if attached to this bone.

But the power of Rive animation comes with a solid learning curve. While the interface looks familiar, it’s not a timeline animation tool—you’ll need to dive into how states and logic work to get the most out of it.

The tool has a Free plan, but it only allows manually importing animations with JavaScript code. To embed files, you'll have to get a paid Rive plan.