Animating Elements in MakeStories

Introduction

Hello, Welcome to chapter 19 of the MakeStories 101 course. In this course, we are going to take a look at how to animate your elements inside the MakeStories editor.

Till now we have seen almost everything in the left bar, When we come to the right bar, we have seen how to use the designing tab. We have also seen everything about the canvas and its surrounding components.

Now, this is one of the final lessons, inside the editor where we will take a look at the animation tab in the right panel.

All about Animation elements in MakeStories

Animation is one of the most important aspects of your web story because it is going to make our web story look really engaging. We have seen the background animations in one of our previous lessons.

Let's take a look at how we can animate these three text elements. So to start the animation, What we will do is first we will click this particular element, any element that you want to animate.

So when you start, your editor will by default add the design tab. So we will click the particular element and then we will go into the animation tab. Here you will see four different options. The first option is the effect that you want to apply to this first particular text element.

We will write a basic Fade-In animation for this first particular element. Here you have the duration or the timing of this particular animation so this will always be in seconds.

Let's say we want to have this animation for two seconds, two seconds can be a bit longer. So let's keep it one second.

Now we will preview this animation, but here, you can see one thing that as soon as the slide loads the animation is almost finished.

What you can do in such a scenario, you will add something called a start Delay. We will come on the sequence part later.

Let's say add a start delay of half-second, and now let's see. So here, we can see that first, the slide did load, and then these particular element texts kept fade in and appear.

Use the start delay of half a second. So the slide will first load, it will wait for half-second, and then the animation will load. if you do not use a start delay, the users might not be able to see the animation properly.

Now we will click on the second element. What we will do is make this second text element come from the left-hand side, and this third text element comes from the right-hand side. So we will click the second element. We will go into the animation effect and select fly in from the left.

Here Again, we will keep the duration timing as a half-second, because half-second is pretty enough.

What does Sequence mean in Animation?

In the sequence, on-load means that as soon as the slide loads, you are able to run this animation, but you can use the sequencing if you want to animate after some other component, or you want to animate one component on the dependency of the other.

This means that once the first element of the new animation completes then You want the second element text to animate in from the left.

In such a scenario you will select after the first text element. Now we will play this animation.

Now we will play this animation. You can see the first text element, in particular, did appear, and then the second one came in from the left and for the third one, we have kept fly In from right.

Now in the sequence, you can see that you have three options after the first element, after the second element, and after the background animation.

You probably never want to select the third one because the background animation is for 10 seconds. It will almost take 10 seconds for this text to come in.

In the Sequence tab, you can also have two animations dependent on one parent.

Let's say we will keep fly in from the left and then fly in from the right at the same time, which is after the first text element.

Now let's play this animation. You can see both of these came at the same time. This is the basic animation that you can use.

Other Animation effects of Text elements

There are multiple effects like flying from the right. There is an option of flying from the top so It will come in from the top. There is flying from the bottom option, which will make the text coming from the bottom.

Then there is a rotate in left, so it will rotate and come, then there is a rotate in right, then there is woosh in left, then woosh in, right.

Then there is a drop element, so it will drop. And then there is a Zoom out.

You probably don't want to use zoom out, because the output of the zoom out animation is not that great.

The one animation that I've left is Twirl In. Twirl In will basically twirl and come. This is how you will animate your components inside MakeStories.

It is pretty simple and once you get used to it, you will love to play around and build beautiful animations. We are also coming up with some new animations.

Whenever we will come with such animations, we will drop an email to each one of you, till then you can use these preset animations.

Thank you, everyone.