Layer animation - Building an animation

In this tutorial, I'll show you how to create an animation like this one:

Building the first step of an IN animation

The very first step is to create the layers which we are going to use. For this tutorial, I'll use a text and an area layer. Add some content to the text layer and customize it. Do not give any background color to this layer! When you finished customizing the text, select some background color at the area layer's item tab. If you would like to handle the layers easier, you could chain them together, just make sure you have the area layer selected when you push the Parent picker button.

Once the layers are ready to animate, select your text layer, go to the Animations tab and add a new IN animation. To start, you could select a pre-defined animation, but since the point of this tutorial is to learn how to build your own, I'd rather suggest not to do that.

In this animation, I would like the text layer to "fade down". That can be done by setting the Opacity to 0 and editing the Offset - Y value. I'll use 400 there, but you could use a larger value.

The result will look like this:

I also would like the animation to come from the left side, so I'll modify the Offset - X, too. The value will be 400 again, which will make the layer animation start from 400px to the left.

The result will look like this:

Playing around with the Easing

There is one setting that worth mentioning here, which is the Easing. The default setting is Cubic out, but an animation like this might be smoother with a linear setting.

Try out some Easings and select the one you prefer, but do not click on the Apply button just yet. Firts, let's add another animation step.

New animation step

This step should have its Opacity set to 100, the Offsets set to 0, and the Scale - X, Scale - Y values set to a much larger number than 100. In my case, that number will be 300.

If you now check the preview, you can see that the animation doesn't really look like the one we were tryign to create, as the last animation step makes it scale back down.

Using the Special zero

Scroll down to find the Layer global animation properties, turn on the Expert mode (it can be done at the Animation manager window, too, so just simply click on the switcher) and turn on the newly appeared option, the Special zero. Make sure the Repeatable option is turned off!

If you check the animation now, it looks exactly the one as in the result you saw in the top of this tutorial

Click on Apply to save the animation. Now the only thing that needs to be done is to duplicate this animation to the other layer.

Final steps

Open up the IN animation manager at the area layer, go to the last animation step, and reduce the Opacity to 70%.

You could adjust the animation duration at the timeline, if you would like:

And the animation is done.