In this video tutorial, we’ll explore how we can zoom in Articulate Storyline 360 by analyzing the options available when using the default way - zoom regions. Then, we will explore how to use GSAP to achieve a similar effect by modifying an object’s scale. We will then control our zoom with buttons that allow us to zoom in and zoom back out to reset the view. And we’ll also control our zoomed in image using arrow buttons....

In this video tutorial, we will use Javascript and a bit of GSAP to make an Articulate Storyline 360 slide object follow the mouse cursor’s position. We will use getBoundingClientRect() to get the position of our slide in the viewport, then make sure the satellite moves only when the mouse is within the bounds of the slide. 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 var player = GetPlayer(); var satellite = document....

In this video tutorial, we’ll go through a few projects that will help us understand how to implement GSAP to create complex animations, emphasis animations and enhanced interactions in Articulate Storyline 360. GSAP (Greensock Animation Platform) is a Javascript code library that is already integrated into Storyline, which makes it easier for us to animate our slide objects with code to increase interactivity and perhaps cut down on development time for our e-learning projects....

In this video tutorial, we’ll be exploring what happens when you want to display checkmarks next to each answer in order to provide feedback to your users in Articulate Storyline 360. We will use a graded question slide with shuffle answers enabled. Even though our answers are set to a random order every time the question loads, we still want the checkmarks to appear next to their assigned answer. We will use a Storyline bug and copy our checkmarks into the normal state of each answer so that they can move when the answer boxes move....