Layer animation

You can manage your layer animations from the layer window itself.

There are two types of layer animations:

• Basic animations
• Reveal animations: special layer animations

Basic Animation settings

Layer animations work the way that you can put as many animations on one layer, as many you want with the Add Keyframe. The configurations you have will be based on the original position for every animation. The original position will be the endpoint, so for example if you put 100px to the Offset - Y, your layer will start from 100px higher, and move down to the original position. You can see an example here.

Configuration

Duration

The duration of the animation step.

Delay

The amount of time the animation waits before start.

Easing

The pace of the animation.

Opacity

This is how transparent your layer will be.

Blur

A blur effect on your layer.

Offset

This is the position of your layer.

Rotate

You can rotate your layer around the X, Y and/or Z axis.

Scale

Your layer will be scaled up or down to these given numbers.

Skew

Your layer will be skewed by the given percent.

Basic Layer global animation properties

These special settings appear after clicking on the Settings button at each animation type.

In animation

Special zero

If you turn this option on, the last layer animation won't be an animation, it will just change your layer to the selected display. This will be the ending zero position, the origo, so you will have to adjust your animations to that point.

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate – Z value at the Animation settings, and change the X and Y positions.

Loop animation

You can use this animation to animate your layer as long as the slide is active, for example, you can spin an icon or an image to get attention. Of course, you can use events, too, which will trigger these animations.

Repeat count

If you don't want your loop to be endless, write a number there, and it will play as many times.

Start delay

The animation will wait this many MS before it starts.

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate – Z value at the Animation settings, and change the X and Y positions.

Out animation

Transform origin

The animations are played from this point. The 0,0,0 position is the top left corner of the layer. The best way to visualize this is to give a Rotate - Z value at the Animation settings, and change the X and Y positions.

Reveal Animation

Color

The color of the effect.

Duration

The length of the animation.

Delay

The amount of time the animation waits before start.

From

The effect that moves in the colored box.

To

The effect that removes the colored box.

Easing

The pace of the animation.

Content

The animation of the actual content.

Events

On the Events tab you are able to create triggers about when a layer's animation should start. Read more about this in here.

Plays in when

You can make the layer's incoming animation play when the given event is fired.

Plays out when

You can make the layer's outgoing animation play when the given event is fired.

Plays loop when

You can make the layer's loop animation play when the given event is fired.

Pauses loop when

You can make the layer's loop animation pause when the given event is fired.

Stops loop when

You can make the layer's loop animation stop when the given event is fired.

Repeatable

Allows the incoming and outgoing animations to repeat. It's useful to create complex animations.

Start delay

The time spent before the incoming animation starts again.

End delay

The time spent after the outgoing animation has finished.

Repeat loop only

Allows repeating the loop animations only, without repeating the incoming and outgoing animations.

Trigger custom event on

You can trigger custom events that start the layer animations on the following acrtions:

• Click
• Mouse enter
• Mouse leave
• Media started
• Media paused
• Media stopped

JavaScript codes

Under the Trigger custom event on section you are able to write down any JavaScript codes. For example if you write this into the Click trigger:

alert('test');

then a "test" alert will appear upon clicking the layer.