Creating an auto advancing story

Introduction

Hello. Welcome to lesson 20 of the MakeStories 101 course. In this course, we will learn about creating an auto-advancing story.

What do you mean by an auto-advancing story?

When we see the preview of the story we created, you can see that you have to click through the story. You have clicked through the slide to go to the next one.

But there is a better way to go around it. Web stories support the feature like Instagram and Whatsapp, where users can directly move to the next slide of the story after waiting for some time rather than keeping on clicking it. The click will still work though, just like other platforms. This is called auto-advancing in web stories.

How to create an Auto-Advancing Story in MakeStories?

You can actually customize where you want the story to advance to the next slide, to do that. You have two ways to do it.

Number one, you have an auto-advance option over at the bottom of the editor.

The second way to do it is by having the auto-advance option under the setting tab in the right panel. This particular setting is on the slide level, ie. will change for every slide.

There is no way that you can set all these slides to auto-advance after let's say five seconds or something like that.

The reason we do not allow our users to do that is because every slide may have different content. Some might take less than five seconds or X that you want to set, or some might take more seconds.

We want to give users complete control over how they select to advance their stories.

Now let's take a look at all the possibilities that you will have when you select the auto-advance option.

Let's say there is a slide that we want to auto-advance. So what we will do first is set the background animation for that particular slide to five seconds.

Pro tip: Even if you are in the design tab, the moment you turn on the auto-advance option, you will see that the right panel is automatically shifted from their design tab to the settings tab.

Over here, the auto-advance option is turned on. Here you can see an option that says on and off or auto-advance after waiting for, let's say five seconds and we will save this and now we will preview this.

Now if you check the preview, as soon as the preview loads, after five seconds, the first slide automatically shifts to the next one. (Assuming you have multiple slides)

It is irrespective of whether the animation and whatever happens, even if the animation does not end within five seconds, it will automatically move to the next slide because we have set the waiting time as five seconds.

The next option that we have is something that says the video ends, but remember you can auto-advance after the video ending only if you have a video element on your slide.

You can see in this particular slide, number one, we do not have any video over here. So then we will try to select the “After Video Ends” option, the MakeStories editor will give us an error saying no videos found on the current page, please add one and then try. So we will click ok.

How to move the user to the next slide automatically after a video ends in a page of a web story?

Add at least one video over on the slide either in the background video or on the canvas.

Now turn on the auto advance and select auto advance to the next slide, when the video ends.

Now you will see, when we click on the video ends, it will give a new option to select the video for which you want to wait. It will show you options like Background and each element name (You can refer to the layers tab to confirm the name of the video in case you have multiple videos).

Once you have selected the video and look at the preview, you will observe that the story moves to the next slide as the video ends.

How to move the user to the next slide automatically when an animation ends?

Again, like most of the time, you really don't want to just move away to the next slide as soon as the animation is completed. Here we have given another option, which says waiting time after the animation completes in seconds.

Let's say our animation did end. We want our users to take a glance at that particular slide for two seconds. So, we will put in two seconds in the optional area.

In this example, what will happen is that first, all the animation, including the background animations will complete, then this slide will wait for two seconds, and then it will go to slide number two.

If you have set background animation also, then, all animations including background animations will complete and then it waits for two seconds (or any time that you select) and then it moves to the next one. We hope now the animation control with auto-advance is clear with you guys.

So now you can automatically create an option where your story will automatically move to the next slide without your user having to do any kind of action.

We hope this was useful, and you will create an experience for your users where they don't have to tap through multiple slides, and they can just read the entire story.