Understanding Animated Backgrounds

Introduction to animated background effect

Hello, and welcome to Chapter Four of the MakeStories 101 course. The last video we've seen, how you can use videos, how you upload your own videos, and how you can use stock gifs too as your background in MakeStories editor.

Now we will see one of the most amazing features of MakeStories that is the animated backgrounds. This can be something really exciting because we have tried to make your stories more interactive by having these kinds of backgrounds.

In Animated backgrounds, we have 10 different types of backgrounds right now, and we will go into each of them in detail.

Animated Gradient effect

The first one is the animated gradient. This is the feature that lots of people have been using on their websites. It was one of the features that we loved a lot. So we have tried to implement it.

You don't have to worry about it being in, be compliant because these animations are pretty light and they won't affect the overall size of your story. So you can use it freely.

One thing that you need to remember is that when you use MakeStories everything can be customized and that's what we at MakeStories committed for.

How to use animated gradient background? How to customize colors for the background?

Now we have clicked on this animated gradient and it was applied as a background. Now, if you want to customize the colors, all you have to do is click on the background.

In the right banner, you will see an option that says colors. So click on that. These are the four colors that are being used in the gradient right now. Suppose if you have your own branding colors, you can use them.

All you have to do is click the color swatch. When you click them, you will see a color picker. Now you can select the color of your choice and click on apply.

Then again go to the color picker and select another color and click on apply. These are the colors like we offer you full colors. If you want, you can add more colors.

How to add more colors to an animated gradient background?

All you have to do is go to the right panel and click plus, and then here you can select the color of your choice and it will be applied to the left-hand side. You can do that. You can add up to 10 colors in this particular gradient style. Now you can customize it the way you want.

Bokeh effect in MakeStories editor

The next effect is the bokeh effect. You can just click the bokeh effect over here, and it will be applied as the background. You can see that these are like beautiful, small crystal balls faded and coming up.

To customize, you have to click the background. You have to go into the customized tab. Here You will be asked for the background color. Let’s say we select the white color. Here you can also select bubble colors. Here for bubble color, we would go for little light colors.

Please remember all of this stuff, all of these customizations that you do, they happen in real-time and you can see them live in the story.

So we have now customized the animated gradient and we have customized the bokeh effect.

Parallax Start animated effect in MakeStories

Now I will go for the third animated effect, which is called the Parallax Star. To apply this, click this effect. When you apply the background, you will get a customized stab. So click it.

This is like a gradient background. You will have to select two colors. So we will select these two colors. Now you can see, we have a cool-looking background, gradient background. It's like a kind of subtle effect going on over here.

Shooting star animated effect

Another animated effect we have is a shooting star effect. When you apply that, you go into the customize. You have two colors over here. This time select white and the variation of light gray, and let's change the star colors to black.

Now you can see that we have changed it and it's looking better.

Bubble animated effect

The next one we have is the bubble effect. Again, you can go click on customize. Select your background color, and shape of the bubble and see how it looks. You can change the bubble shape from square to circle. So it's completely up to you what you want to use.

Breathing Circle animated effect

Then you have a breathing circle animated effect. Over here for the customization options, you just have an option to change the background colors. So you can do it this way.

Rainbow animated effect

Then you have the rainbow colors animated effect. Unfortunately, this is the only effect where we don't have customization options.

One of the reasons to do that is because we believe this animation looks really well in the way it is. We have not provided many options for customizations over here.

Glitch animated effect

The next one is the glitch effect. You can see that this image is having a glitch effect. Now the customization option over here is that you can go in and you can use your own image.

So you have to use the image that you’ve just uploaded or you need to upload an image to use this effect. Once you uploaded an image into the canvas, the glitch effect will be applied automatically

Paper bird animated effect

The next effect is the paper bird animated effect. The customization options here are the background colors and wind colors. We will change the background color to black and the wind color to white. You can see this happening in real-time.

Mask animated effect

The final option, which we will show you is the mask animated effect. There is one reason we actually build this effect. We did see many people, uploading videos for things like this. Like you say, you have 4 images. We have seen a lot of users creating videos for the 4 images and uploading them over here.

Rather than doing this, all you can do is you can use the mask effect and we allow you to change upto four images. There are six different mask effects, which you can use.

Depending on what mask effect you will select. You can see it will be applied to the canvas. If you want to change the images, you can either put in your URL over here in the customize effect or you can just click the image and then you can select the images that you want.

So we will upload the 4 images.

You can change the customize effect options. The moment you change the effect, the same effect will be applied to the canvas.

Seven background Types and animation effects in brief

We complete the seven background animation types. We will revise them once again. So the first one is a solid color.

You can use any of the colors from these particular swatches, or you can select your own color. You can enter the hex code of your color here, and you can select one from the color picker.

Then You have gradients, then you have textures and then you have images. All the images are the stock images from Unsplash. If you want to upload your own image or use the image, which you have previously uploaded, you can click the media library.

If you want to go back to the editor, you just link back to the editor.

Then you have videos. These videos are free-to-use stock videos. If you want to upload or use your own video, which you have previously uploaded, you again click the Media library and you select them.

Here you have Gifs, these Gifs are free to use stock gifs. If you want to upload your own Gifs, you can again go to the media library to upload your Gifs.

Then you have an animated background. There were 10 different types of animated backgrounds. We saw in this video how you can customize each one of them.

We hope you love this video. In the next video, we are going to see what overlays are, why you should use them. With this, we will be done with the background section. The only thing that will remain in the background animations, which will be covered in the lesson after the next one.

Thank you.