2. Adding animations

In the previous guide we made a simple lower third, which responds to events fired by the Ease Live production panel. In this guide we will continue where we left off, by adding some animations to make the show & hide transitions a bit more pleasant. A couple minutes from now, we will have added in & out transitions to our lower third:

The basics

In the animations panel, you will see four tabs: show, hide, activate and deactivate. These are predefined for any scene, and are triggered automatically when a scene is shown, hidden, activated or deactivated (more on the last two later). You can also add extra animations via the "Create new..." button, and trigger them as needed via – you guessed it – triggers. For this guide though, we will stick to just show & hide.

Step 1: Animating a layer

Let's say we want our lower third to slide into view when the producer airs it. We could do this by animating its position manually, but for your convenience we have created automagic presets for some of the most common use cases. All we need to do is select the layer we want to animate, click the + ANIMATE button, and pick slide-in-bottom from the presets list:

This preset will automatically set the layer's starting position to just outside the bottom edge of its parent – in our case, the screen.

Step 2: Adjusting the timing

Now let's make it a bit snappier. First we'll drag the rightmost handle of the blue timeline segment to reduce the duration to our liking. Then click the little arrow next to slide-in-bottom and pick a suitable easing curve (see easings.net for a handy cheat sheet). For things that fly in from out of view, it is usually best to just ease out, so we will go with ease-out-quart:

Feel free to play around with animating more properties and presets! For our example we will simply add the exact same preset directly to the text layer as well, to create a slight staggered effect.

Step 3: Wrapping up

Lastly, we will jump to the hide tab and add an equivalent slide-out-bottom animation, making sure to use ease-in-quart this time for a smooth acceleration. And with that, we are ready to hit PREVIEW and enjoy our much improved lower third:

This is all well and good so far, but we have barely scratched the surface. Time to get to the real secret to engaging your users – interactivity.