Create an image carousel Articulate Storyline 360

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. We will use the gsap.getProperty function to get the position of the carousel on the X axis, then use an if statement to check if it is greater or lesser than some limits we set. That way, even if the user presses a button, once the carousel reaches or exceeds that limit, the movement will not trigger.

Then, we will explore how the user can control the same interaction by hovering over some buttons, which will cause the carousel to move to a specific position depending on which button the mouse hovers over.

____________________

CHAPTERS:

00:00 Intro
00:50 Image carousel using motion paths and Storyline triggers
05:23 Using GSAP and Javascript
07:17 Clamp movement using getProperty and an if statement
16:48 Image carousel with hoverable buttons

____________________

Code available here: https://learnomancer.com/posts/image-...

#articulatestoryline #gsap #javascript #storyline #storyline360 #elearningdevelopment #instructionaldesign #elearning #gsapanimation