Welcome

Learn how to apply animations across your eLearning project with just one Execute Javascript trigger! No Format Painter! No going back to tediously apply animations or states manually. In this video tutorial, I’ll guide you through the steps to apply hover animations to multiple elements in your Storyline projects using a single master slide trigger. This method is perfect for large projects with varied interactive components, ensuring uniformity and saving you tons of time....

In this video tutorial, I’ll walk you through the process of creating a dynamic slide in Articulate Storyline 360 where a random sentence from a list appears each time you click a button. With just a few lines of JavaScript, you can add an interactive element to your e-learning courses that keeps learners engaged and curious. Here’s what we’ll cover: Setting up the slide and button in Storyline Creating a Storyline variable to store the extracted sentence Preparing the text box to display sentences of varying lengths Adding JavaScript to select a random sentence from a list Inserting the extracted sentence back into the Storyline variable -Testing and publishing the slide to see the random sentence generator in action Here’s the video Code used 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 var player = GetPlayer(); var sentence = player....

In this video, we’ll go through a bit of a tutorial on how to explore the practical side of gamification by crafting a dynamic progress bar in Articulate Storyline 360 that updates when the user earns points or gains levels. The scenario: The user gains some experience points when they’re correctly answering a question. When they reach 1000 XP points, they gain a level. I want to show their progress using a progress bar....

In this video tutorial, we find out how to use CSS clip path to change the shape of our images, or rather of our image cropping areas, in Articulate Storyline 360. We’re going to use Execute Javascript triggers, and, inside them, our code will add clip paths to the pictures. Then, we’ll animate those clip paths with the GSAP (Greensock Animation Platform) in order to create a nice effect. Although there already are some features available that achieve more or less the same thing in Storyline, it’s interesting to see how we can control our animation using Javascript....

In this video tutorial, we use the cloneNode function of Javascript to clone a png image of a sheep. And then we’ll move the clones using GSAP to create a nice division animation. It was amazing to see that you can actually duplicate elements in Articulate Storyline 360 using Javascript. I was inspired by Doctor Strange splitting into multiple clones during the battle with Thanos from Infinity War (lol), and I wondered if we could achieve this effect in Articulate Storyline 360....

In this video tutorial, we’ll experiment with event listeners for mouse hover using an execute Javascript trigger in Articulate Storyline 360. These event listeners will allow us to trigger some animations when the mouse hovers over an object, and when the mouse leaves the bounding box of an object. We will use these event listeners to play a GSAP animation timeline when we hover the mouse over a png image, then reverse (or rewind) the animation when the mouse no longer hovers on the image....

In this video tutorial, we’ll explore how to click on objects in Articulate Storyline 360 and register those clicks using mouse click event listeners in Javascript. We’re going to click on multiple objects affect their properties, all by using only one trigger - the execute Javascript trigger. To exemplify this, I made a hidden objects mini game. In it, you have to click on each of the objects scattered throughout the slide....

In this video tutorial, we will explore how to make a progress bar in Articulate Storyline 360. Our progress bar will update when we move back and forward through our slides. And, no matter how many slides we have in our project, our progress bar will scale and display the progress accurately. The progress bar uses Javascript (GSAP) to animate the shape and makes use of the built-in Storyline variables showing the slide number in the project (Project....

In this video tutorial, I try and replicate a morph effect in Articulate Storyline 360 by using match cuts. This is like using a sleight of hand, performing an illusion where one element seems to change shape and become the other. When, in fact, all we’re doing is cutting in the middle of an animation and inserting another animation in there, and our eye is fooled into thinking that the animation continues seamlessly....

In this video tutorial, we will explore how to create an image carousel interaction in Articulate Storyline 360 in several different ways. We will use motion paths to move the image carousel when the user presses some buttons, then use Storyline triggers to check for intersection and intersection end in order to clamp the movement of our carousel by hiding the buttons. Then, we will explore how to clamp the movement of an image carousel when we use GSAP to animate it....