Articulate Storyline Tips & Tricks

Creating a looping animation

Creating a looping animation

Do you also make use of animations in Articulate Storyline if you want you to be able to play or run animations continuously? In this video I will show you how to do this in Articulate Storyline.

By default, Articulate Storyline does not have the ability to run an animation. But, here too there are ways to do this anyway in Articulate Storyline.

To loop an animation

By default, Articulate Storyline does not have the ability to loop an animation, but there are several solutions to get this done in Articulate Storyline. And then in this preview, you'll see that I've created an animation of a walking boy. And now I'll show you how set this up and Articulate Storyline step by step.

To see how I've set this animation up in Articulate Storyline, I will close my preview animation and you can see that I've created an Articulate Storyline project with only one slide. And this slide has a base layer that you can see here and a slide layer that's called loop. And on this slide layer, there are four images of a walking figure and each image has a different position so you can see here. And if you play this images in a sequence, it look likes if the boy walks. Now, what I've done on this slide layer is I've given the slide layer an amount of time of one second. And I placed the images, after each other and each image, it can be seen for a quarter of a second. Now I want to make this figure a walk.

Create a trigger

The first thing that I have done is I created a trigger on the base layer. I click my base layer and you can see here the trigger and this trigger says show layer loop when the timeline starts. When the timeline of my base layer starts, my slide layer loop will be visible. But if I preview my animation, you can see that it's only takes one step and I want to keep the animation running. What I've done on my slide layer, I've created two triggers.

And the first trigger ensures that the loop layer disappears when the timeline of the loop layer ends. I created a trigger that says, "Hide layer." Which layer? This layer when the timeline ends of the layer loop. And the second trigger is a trigger that shows the layer loop again. I will create a trigger that says, "Show layer." Which layer? Loop, when the timeline ends. Also layer loop. What this trigger does is when the timeline ends, first this trigger is fired. The layer loop will hide. And then the next trigger is fired and it will show the layer from the beginning.

And the next step is to check if the slide layer has the right properties set for it. When you click with your mouse, right mouse on your slide layer and go to properties, you'll see here, by revisits, it says when revisiting reset to initial state. This means that Articulate Storyline sets your slide layer to the beginning and not to for instance, the half of the end. And when Articulate Storyline sets the slide layer to the beginning, it jumps to the beginning of our animation. Our animation runs for one second. It ends. Articulate Storyline hides this layer and for the next trigger is that it shows the layer and the animation will play again and again. This is how we created a loop in Articulate Storyline.

Create buttons

And now this animation runs continuously, but you can also create buttons that your user can stop and restart your animation. And I will show you how you can do this. We'll go to the insert tab and I'll insert a shape. This is my button. And on this button, I will create a new trigger. This trigger will say, "Pause timeline" for the timeline loop when the user clicks on object rectangle one. This is my button, but now we can only pause the animation and we want to start the animation again. I'll copy this button and you'll see Articulate Storyline automatically copies the trigger that's attached to the button. I'll open this trigger and instead of pause timeline, I click here on resume timeline. For timeline I set timeline for loop so that is the timeline of my slide layer when user clicks on rectangle tool.

Preview the slide

And now let's preview this slide. You can see that the boy is walking. When I click on the first button, it stops. And when I click on the second button, the boy is walking again. Now you have created the looping animation and you can also pause your animation and play your animation again.

Do you have any questions about this video or Articulate Storyline in common? Then leave a comment below video and i’ll promise to answer it.

Thank you for watching.

FasterCourse Banner
Would you like to know more about Upward Online Learning and Articulate Storyline? 

🔔 Subscribe here for more free E-learning and Storyline tips

📕 Download the Ultimate process how to create e-learning with Articulate Storyline here

🎓 Want to learn more about Articulate Storyline? You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the sign-up and you’ll receive your discount directly!

🎓 Do you want to start your Storyline project with modern design elearning templates that are easy to use?

You now get a 10% discount on
Fill in the coupon code ‘upwardonline’ on the checkout page and you’ll receive your discount directly!

► Master Articulate Storyline Variables [Like a pro!] see video


Buy books on Articulate Storyline on Amazon:

📕 Articulate Storyline 3 & 360: The Essentials

📕Articulate Storyline 3 & 360: Beyond the Essentials (Second Edition)

📕 E-Learning Uncovered: Articulate Storyline 360: 2nd Edition

Leave a Comment