Animation

On Scroll
On Hover
On Click
On Load

Click!

Animate me!
Animate me!
Animate me!
Animate me!
Create animation with at least four steps. See, it's a piece of cake!
Try to make a sloooow animation... and then a quick one.
Experiment a bit with them to feel the difference.

Welcome to Sandbox, an interactive tutorial,
where you can change whatever you like.

Now you're in the editing mode. To preview the page, press P or click on in the right bottom corner. To return to editing, press , which replaced the eye. You can switch between two modes anytime.


You can switch between two modes at any moment to check how your animation works.

P
switch between editing and preview mode

Press in the right bottom corner and click on any widget to see if it's animated. If it is, the animation toggle will be blue.

There are four types of animation in Readymag.

Create an animation of each type. Choose any widget from the Widgets panel by clicking W or in the bottom left corner of the screen. And then set the animation type in the widget’s settings panel on the right edge of the screen.

W
add widget

⌘+Z
undo action

⌘+Shift+Z
redo action

There are four action options: Move, Opacity, Rotate, and Scale. You can combine multiple techniques in one animation. Try your creativity!

Animation can appear in several steps. To add a step, choose the animated widget and press the Add button at the bottom of the Animation menu.

In the Animation menu you can assign delay and duration time to each animation. Delay is the time before an animation step starts off, while duration determines how long each step will last. There’s also an offset option for On Scroll animation to regulate how far in pixels a user should scroll to launch the animation.

You can loop your animations. There are two types of looping—back-and-forth loops and round loops. To apply the feature, choose or in the Animation below Delay and Duration controls.

One more way to create an animation is to copy the settings from another animated widget. To do this, select a donor widget and press ⌘+Shift+C. Then select the recipient one and press ⌘+Shift+V.

Feel free to borrow one of these!

⌘+Shift+C
copy animation

⌘+Shift+V
paste animation