Ladies and Gentlemen, We’re Floating in Space: Creating Complex Animations with Readymag
Animations have always been an important part of Readymag. They’ve also been updated recently, allowing users to add up to four different animation types for a single widget and get even more creative with loops.
We talked with Tanya Egoshina, a designer at Readymag, about how to put all these new functions into action. As an example we’ve used the Moon Exhibition landing page (pun intended!), an online exhibition hosted by Forward Festivals.
Some of my key inspirations in design are the laws of physics and real-life object interactions. That’s why creating a landing page with a space vibe felt like a pleasant challenge to me.
The first version I put together had this “across the universe” / “once upon a time in a galaxy far far away” feeling. Pictures emerge on scroll, one by one from the center of the screen. They become larger, as if they are approaching, then fly away in different directions beyond the browser window.
To achieve this effect, pin a widget to the center of your project. Then add some animation: change widget size on scroll from 0 to 100%. Simultaneously, animate it to move on scroll to some distant point. Repeat for all widgets, setting the necessary delays and movement directions.
The final version, which you can see now at moonexhibition.com, imitates the effects of zero gravity. Widgets float around their starting spots, slowly rotating back and forth. This is achieved with multiple move-and-rotate effects applied simultaneously. Rhythm and pacing are key: experiment with delays and animation speed to get the proper feeling.
A functionality that allows you to animate every widget using different triggers also came in handy here: all works are animated both on load (movement and rotation) and on hover (size). There’s yet another animation: Lightbox mode, triggered on click.
My great inspiration for this project was Anton Repponen’s ‘20 most important inventions of all time’.
It’s a perfect match between goal and realisation — animations are quite numerous, but it doesn’t hurt the readability. On the contrary, animations sync up with one another and create a specific mood.
It is also obviously inspired by the rules of physics, as were the animations for my Moon Exhibition. They might seem extremely simple, but they are in fact crafted masterfully.
Animations in Readymag are capable of almost anything — still, sometimes I dream of integrated frame-by-frame animation uploads. But keep in mind that, with a little effort, you can achieve this by using custom code with CSS keyframes.