Have you ever tried to use exit animations in your Storyline course and found that they didn't behave in the way you expected?
Did you end up with objects that animated their way off the screen before they should have, but you couldn't figure out why?
You think it shouldn't be hard to trigger an exit animations with a button click, but at first glance, it looks like Storyline only wants to do it when the timeline ends. What's up with that?
In this tutorial, we will look at how to make sure our exit animations are triggered by a button press, not by the end of the timeline.
In this tutorial, we will look at how to get control of our exit animations. And we will do it in a way that doesn't involve creating duplicate layers just to animate things off the stage...
Why Do We Need to Talk About This? Isn't It Obvious?
It should be, but despite Articulate's efforts to make this as clear as possible, it is still something that causes confusion for many people. I know it confused me when I first started using Storyline.
Because there is a disconnect between how we think exit animations should work and how they actually do.
How They Should Work
This is how we think exit animations should work:
We think that an exit animation should fire when the learner clicks a button to move to the next slide.
We think that an exit animation should fire when the learner clicks a button to close a layer.
We think that an exit animation should fire when the timeline of an object ends.
How They Actually Do
And this is how exit animations actually work:
Exit animations fire when the timeline of the object ends.
Exit animations fire when the timeline of the slide that the object is on ends (even if the slide is waiting for input from the learner).
This issue is that we want exit animations to wait for input from the learner, but they have other plans. You see, exit animations fire when the timeline of the object ends. For example, let's look at the below timeline:
There are two objects shown in the above timeline.
The first one is set to Show Until End, which means the object will show until the end of the timeline.
The second object ends half a second before the end of the timeline.
We'd expect the first object to stay visible until the learner navigates to the next slide.
And that's exactly what happens if no exit animation is applied. However, once we add an exit animation, that overrides the Show Until End setting.
This isn't a bug. The exit animation is working exactly as Articulate intended. We've gotta keep in mind that the exit animation is not separate from the object's timeline. So when the timeline ends, the exit animation will fire because, well, that's its job!
So that it how we end up with something like this:
Let's look at how the above example looks in Storyline:
As you can see, the various objects on the slide are all set to show until the slide ends (as indicated by the little at the end of the timeline).
The four icons also have exit animations applied. So when the timeline ends, the exit animation fires and they disappear, leaving the learner staring at a half empty page.
This isn't quite the effect we are looking for!
Okay, So How Do We Get Control?
It all comes down to the timeline.
We need to control it, rather than let it control us.
We have the animations that we want in place, but they are running according to their own little schedule.
So we need to interrupt that by making a few changes to the way the slide has been built. Then we can get our exit animations to behave themselves.
So how do we do that?
By pausing the timeline just before the exit animations fire. So in this case, because our exit animations have a duration of 0.5 seconds (and our timeline has a duration of 3 seconds), let's pause the timeline at 2.5 seconds:
So now when the timeline reaches 2.5 seconds, it will pause.
This will stop the exit animations from firing.
However, if that's all we do, then we won't see them at all because when the learner clicks the Next button, they will just be taken to the next slide.
So let's remove the Jump to next slide when the user clicks trigger and replace it with a Resume timeline action.
This means that when the learner clicks the Next button, the timeline will resume, showing the exit animations.
Of course, we still need to jump to the next slide, so let's add another trigger that'll do that when the timeline ends.
So the slide should now look like this:
So that's how you get control of exit animations!
Here's a Demo
Here is a demo of the final project so you can see how it works:
Files you might need:
Here is the .story file that was used in this example.
Frequently Asked Questions:
Q. Does this work on layers? A. Sure, the same approach applies. Just hide the layer rather than jump to the next slide.
Q. What's the duplicate layer option that you mentioned earlier? A. It involves creating a new layer that contains all of your objects with the exit animation applied. Then when you want the exit animations to fire, you show that layer. The problem with this approach is that it is rather cumbersome, especially when it comes to updating the course later as you'll need to update the main slide and the duplicate layer.
Q. Are there other ways to trigger the exit animation? A. Yes, when you change an object's state to hidden the exit animation will fire. And when you change from a hidden state to a normal state the entrance animation will fire.
Q. Where can I learn more animation tricks? A. Check out this great post from Josh Stoner.
Q. What's up with the sun, leaf, snow and flower images? A. It's a reference to my all-time favourite movie.
Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?) A. Yes, it will.
Q. Will this work in Articulate Mobile Player? A. Yes, it will.
Q. Will this work in an LMS? A. Yes, it will.
Q. Do Articulate support this method?
it will they will.
Q. My question isn't listed here, what should I do? A. Animate it. Then pop it in the comments below or reach out to me.
(Okay, you don't really need to animate it, that'd be silly).
If you found this tutorial helpful and think others in your network will also, please share using the share buttons below. Thanks!