Storyline 360 Crash Course on animation and interactivity using GSAP & Javascript

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.
This should be an interesting topic for intermediate to advance elearning developers using Storyline.
Hope you enjoy these tips and tricks. 🙂
-----
Chapters:
0:00 Intro
2:34 Prerequisites
4:39 What we'll cover
6:25 Setup for our first project
7:34 Changing an object's position with gsap.to
18:00 Selecting one or multiple objects
19:44 Other GSAP methods (from, set, fromTo)
24:22 Increment position on each button press
26:28 Easing
29:51 Special GSAP properties
37:27 Animating opacity
52:40 Animating scale around transform origin points
59:36 How to rotate objects
1:05:47 Rotating in 3D space
1:07:14 Stagger - sequencing animations
1:14:53 GSAP timelines
1:25:01 Controlling slide object animation with a slider
1:43:43 Slot machine-like counter
1:51:53 Animating large groups with a slider
2:04:27 Card flip animation
2:18:56 Animating variable values
2:29:20 Image carousel
2:34:20 Resizing issues & possible solutions
2:50:37 Spin wheel of fortune to random number
3:02:09 Complex sequencing exercise with callback functions
Code available here: learnomancer.com/posts/storyl...
#storyline360 #storyline #articulatestoryline #javascript #gsap

[@michaelosullivan7224]

what a great resource - thanks for sharing - a game changer

[@learnomancer]

Thanks. Glad it was helpful :)

[@sirinbirdy]

Your videos are so useful! Thank you very much!

[@learnomancer]

Thank you. I'm glad they prove useful.

[@paulwalkinshaw3053]

A fantastic and transformative video. Thank you for not only explaining it all so clearly with some great examples, but also for revealing GSAP in SL; your channel was the first I'd ever heard of it. Your channel is an amazing resource, so thank you again. I've shared the video on LinkedIn to all my instructional design and learning contacts because you deserve so many more subscribers.

[@learnomancer]

Thank you for the kind words ! :) I'm glad you found this useful

[@almahaali4488]

thank u, so good i really love it

[@chrismalisilver]

Thank you! Hope you’ll do more tutorials like this

[@tesscrossen5930]

This is terrific! Thank you!

[@learnomancer]

I'm glad you found it useful :)

[@Mabas241]

You make such a great job! Thank for all... I watch this video something like 5 or 6 time entirely to understand well... Because I'm just beginning in JavaScript and use code in Storyline... Thank again... Hope you will share again your knowledge with us 🙏🏾

[@learnomancer]

Thank you for the kind words!

[@almahaali4488]

in image carousel i can't limt the rang of animation , can u show me how we can use " if "to control that ?

[@learnomancer]

Hey, good question. Hopefully my answer below is clear enough. I will make a video on this topic in the future.
You can use an if like this:
on the left button:
if (the value on the X < the minimum X value I want the carousel to move to){
gsap.to(move on the X);
and for the right button:
if (the value on the X > the maximum X value I want the carousel to move to){
gsap.to(move on the X);
You will need to adjust the minimum X and maximum X through trial and error.
OR
You could use some rectangle shapes on the left and right edges of the slide, and set a Storyline trigger like this:
when the Carousel Group stops intersecting with the left rectangle, hide the Move Right button (so we can't move the carousel to the right anymore)
And do the same for the Move Left button: when the Carousel Group stops intersecting with the right rectangle, hide the Move Left button

[@tomekipro1687]

disadvantage is that is not free for Commercial use.

[@learnomancer]

I think that depends on your use case. It seems to be free to use in most cases, according to their licensing terms at gsap.com/licensing/
Their license is really permissive and should allow for uses in elearning for free. It says so under the "Covered by the "no-charge" license" section.
Always check to see if your use case fits.