How to stagger your animations

Transcript

We have added animation to all the different elements of the post. But as you can see, when I press play, all of them animate at the same time, which can be quite confusing and chaotic for someone who wants to read the messaging. To solve this, we need to stagger our animations. First, we have to expose the timeline by pressing the edit timeline button. We have now exposed the timeline and we can see the entire animation plays over 6 seconds. Selecting a specific element such as around the Roundel, you can now see where the Roundel sits on the timeline. As you can see, it’s across the entire timeline. But if I grab it from the left hand side and drag it to the right, I can then make sure it appears from that point onwards.

I can do the same thing with the headline as I do that you’ll notice the blue dots on the left hand side which indicate the starting point of the other elements. Now the headline appears at a later stage. In the case of the background image, I want it to be present across the entire animation so I’m not touching it by clicking on the different elements. I can see how they sit on the timeline, meaning they are animating at different points, which makes it easier for me to read the messaging.

I’m also going to tweak the headline to come in a fraction later to make it easier to read.

You can extend the overall timing on the post by grabbing the bottom timeline and extending it to the right or left to shorten.