Nowadays, most website builders allow for the creation of simple micro-animations that make objects change size or opacity, or give you presets. For more complex animations, you need to know how to code. Readymag, a design tool that helps create websites without coding, offers you an advanced animation toolbox: controllable multistep and multiparameter animations, Lottie animation support, and in-house effects that will take your website design to another level. Apart from animation options, Readymag gives you complete creative freedom backed by a blank layout, 5,000+ fonts available within a subscription, internal tools for streamlined collaboration, and tweakable SEO settings.
In the article, Alexander Sherman, Product Designer at Readymag, explains the power and applicability of Readymag animations and offers creative tips for making a website more interactive.
Forget bulky timelines, add effects on multiple triggers in up to 20 steps
Readymag offers a universal approach to animation: you can create and edit multistep animations right in the editor and apply them to any widget, a building block that forms the layout: text, icon, picture, button, slideshow, etc. Readymag widgets can be animated individually or grouped and forced to behave as a unit. Also, separate triggers and steps allow you to run linear action and sequential scenarios.
Triggers invoke actions: for example, movement or opacity changes. In Readymag, there are 4 triggers to invoke actions: on load, scroll, hover, and click. After you’ve assigned triggers, you can organize the actions in a sequence using up to 20 steps. You can assign separate, varying parameters to each step, such as position and opacity, and set up custom easings. Also, there’s an option to cycle steps differently: for example, play part of the animation during one step, then loop the second, third, and fourth steps together. We’ve dropped the cumbersome timeline concept in favor of user-friendliness and total creativity, and introduced a simpler way to unfold motion in time—a combination of steps and delays. You can assign a delay to each step, and this delay will become a non-visualized “point on the timeline.”
Here are a few tricks you can add to your animation game with the Readymag toolbox:
Simulate content loading. This trick gives users a physical sense of interaction as they scroll down the page. You can achieve this effect in Readymag by changing the opacity of objects from 80 to 100 and letting them move up a bit and create volume. It’s a great solution to make a landing page less linear and more responsive.
Prompt context. Text animations help to keep the context within users’ sight. For instance, a page has two columns of text: a headline on the left part and a text body on the right. You can fix the headline on the left side on scroll until the text on the right side ends.
Demonstrate processes. Complex processes and multi-layered constructions are often challenging to understand in words and static pictures, so it’s crucial to unfold them step-by-step. You can record a video of a process or its components separately. However, it has to be hosted independently and embedded neatly, and there’s no guarantee users will still watch it. If you show a process through on-scroll animation, you have a better chance of getting your message across.
Make every move natural with Bézier curve-based easings and paths
At the end of 2023, Readymag added Bézier curve manipulations. This release brings together two different features, both of which help to make animations more natural and varied. The first feature is custom easings, which are controlled via Bézier curves; the second is motion paths, which are also controlled by the curves. Previously, Readymag’s easings were pre-programmed for simple ease in and out. These are the most common types, but sometimes designers like to create their own recipes. Now, you can customize easings and make your website experience a signature.
The second feature gives the ability to control movement paths through Bézier curves. Previously, you had to build a path from straight line segments, but with the introduction of Bézier controls, these animations became smooth and natural. These effects are hard to achieve with non-design-oriented website builders because predicting trajectories of objects and coordinating multiple actions is a struggle if you can’t see those paths visually over the layout. With Readymag, all you need to do is form curves you’ll immediately see in the project and move Bézier handles as you like.
And that’s what you can do with Bézier-based custom easings and paths:
Simulate the laws of the physical world. Movements along Bézier curves reproduce the behavior of objects in the real world thanks to natural trajectories. If your layout is mostly graphic and follows a strict grid, you can break it spectacularly using Bézier paths—it will look out of place and attract the eye.
Forget slow-loading animations with feather-weight Lottie and mix it as you like
The Lottie widget came to Readymag in early 2024, following the growing popularity of Lottie animations and the increasing number of tools to create them. Lottie is very lightweight, and therefore loads quickly, and it’s vector-based, which makes it scalable.
From a technical point of view, Lottie is ideal for embedding scalable, fast-loading animations that won’t pixelate or distort colors. Other formats have limitations: for example, videos need to be hosted on YouTube, Vimeo, or another platform. YouTube doesn’t allow hiding controls, and Vimeo only lets you hide them for a fee. Videos may load slowly, they’re hard to control or play on a scroll, and they take up a whole chunk of the layout. Also, videos don’t come with transparent backgrounds: you can put a video with a white background against a white background, but you can’t play something else against a video. GIFs, in turn, are pixel-based, heavy, and short. Lottie doesn’t have any of these issues.
Lottie perfectly combines with Readymag animations. In Readymag, Lottie is a widget—a kind of container. Everything related to Lottie itself plays inside this container, but you can do anything with the box: move it, hide it, zoom it in, or zoom it out.
Here’s what else you’ll be able to do with Lottie:
Create non-standard buttons. You can draw your own animated button, load it into the widget, and add a link.
Animate icons. You can animate a burger menu icon so that three horizontal lines will turn into an X, and the icons will be transformed in a dynamic move, rather than simply replace each other.
Add narrative “cartoons”. Lottie makes it easy to integrate long animations created in third-party editors.
Double-animate an object. Pick a Lottie and give it the same trigger to play both Lottie and Readymag animations: for example, it could be a Lottie-based human walking in place. You can assign an on-click trigger animation to the human, which means that with a click, they’ll start marching in place with legs and arms moving. After that, you can add Readymag on-click move animation to the already animated human. The human will then walk not only on the spot but also from point A to point B.
Painlessly experiment in any possible way
US researchers have proven that people remember, recognize, and explore interactive content way better than plain and bulky text. Animation is one of the tools that can make your designs interactive, entertaining, and memorable. By teaming up with Readymag, you can forget limitations and troublesome workarounds, invent your unique animation recipes, and create designs that wow.
