Adding animations

Adding animations

Storybooks must have animations that support the storytelling. Animations simply bring fun to the reader. In this page, we are going to animate the title and the two buttons. Let’s start with the title

Select the title layer, and then go to Toolset Animations (the rocket icon). There, click the first icon, called Linear Animation.

The following window will open:

As the name states, linear animations allow objects to move from point A (start) to point B (end). Between the points, you can set a duration of the animation, delay and lots of other effects, like easing, for example.

Kwik always uses the current position of the layer as the starting point. In our case, all we need to set is the end position (you can use the sliders or the text fields to enter it), which is the actual position. Then we set the animation duration to 3 seconds, the loop to 1, and the easing to outBounce (it will bounce a little).

Click “Create” button to add the animation. The linear animation is added to Component view.


Click Publish button to generate the codes.

Tip: As you have exported all images already, you don’t need to re-export them again. Simply disable the Export images button as grey. Your publishing process will be much faster.

Layer Position

If both the start and the end-points are the same, the animation won’t move.

You can move the layer by simply dragging the layer content to the new position or apply a Free Transform (Ctrl+T) if you are using Windows,(Command+T) if you are using Mac. This is position A.

If you enter the numbers directly in the X, Y fields, it is position B.

Hiding objects

Now that you learned how to animate an image, let’s make the buttons appear after the title animates.

When the first page starts, we do not want to see the buttons. They must fade from transparent to visible only after the title animates. Let’s select layer readToMe. Go to Toolbox Project and Pages (the first icon) and select the Hide layer or group. You will see the following window:

It will hide the button. Do the same for the readMyself grouped layer.

Let’s animate the buttons to make them visible. Select one of the buttons and click the Linear Animation again:

In this scenario, we are setting a delay of 2 seconds (after the page loads) for a transition from full transparent (alpha 0) to fully visible (alpha 100) for the 2-seconds duration. Also, the loop is just once.

linear_readMySelf and linear_readToMe are created

Publish it again and you will see the button fade after 2 seconds.