The Lottie widget is available with paid plans only.
With the help of the Lottie widget, you can easily embed your Lottie animations into Readymag websites by just pasting a link or uploading a file.
What is Lottie?
Lottie is an open-source, JSON-based animation format that allows you to create complex animations that are lightweight and scalable without pixelation. The format works both on desktop and mobile website versions, as well as in mobile apps.
Lottie maintains high image quality, is 6x smaller than the average GIF, and loads 10x faster. You can create 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.
How to use the widget
After you add the Lottie widget, there are two options for embedding your animation: by uploading the file in .lottie or .json format or by simply pasting a link. You can also test the widget by clicking Random preset, and a random Lottie animation will be added to your project.
When the file is uploaded, you’ll see its properties: size, number of frames, frame rate, and duration. These parameters can’t be changed within Readymag: if you need to adjust them, modify the original file and re-upload it to Readymag. However, you can easily change the widget dimensions by dragging its borders.
The widget in the Editor mode is static. To view the animation, go to Preview mode or select the Lottie Playback option in the widget settings and click Play.
Lottie Playback
In Readymag, you can further customize the added Lottie animation and set the events that will trigger its behavior. The controls for this can be found under Lottie Playback in the widget settings.
Under Animation, in Lottie Playback, you can crop the frame timeline or change the frame direction and make the animation play backward.
The Interaction parameters depend on the type of the event you set.
Page load
The animation starts once the page is loaded.
Under Interaction, you can set the speed of the animation, set the delay, loop the frames, and specify the number of loops.
The Interaction settings are applied when the page is loaded.
Scroll
Lottie is animated by scrolling.
Under Interaction, you can synchronize the desired Lottie behavior with the current page height:
- Counting from the page top: the widget is animated once the scrolling starts from the very top of the page;
- Portion of page height: the interaction happens only within the selected page portion.
Hover (📱Hold)
The animation is played when you hover over the widget or its trigger. To set up the trigger, click Trigger + and select any widget.
Under Interaction, you can also customize Lottie's behavior when it’s unhovered. You can pause, reverse it, customize the speed, and set up looping.
Cursor move (📱Press & Drag)
Cursor movements trigger the animation effect.
Under Interaction, select Move axis: Linear (cursor moves along a straight line) or Circular (cursor moves from the widget's or viewport’s border to its center). The area of this movement can be limited to the widget’s borders or extended to the entire viewport. You can also set Looping here.
Click (📱Tap)
The animation starts once the widget or its trigger is clicked. To set up the trigger, click Trigger + and select any widget.
Under Interaction, you can select the speed, set up the behavior on the second click (Pause or Reverse), and loop the animation.