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

[@Ivandotjpeg]

I waited 5 months to find this. Thank you.

[@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

[@sirinbirdy]

Your videos are so useful! Thank you very much!

[@learnomancer]

Thank you. I'm glad they prove useful.

[@johnthomson1805]

Excellent resource! thank you.

[@michaelosullivan7224]

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

[@learnomancer]

Thanks. Glad it was helpful :)

[@tatiana8252]

This is great work, and it must have taken a long time to complete. Thank you very much! I'm halfway through and applying what you teach to my own Storyline projects. In this way, I'm building my own GSAP library directly in Storyline. I'm so happy I stumbled upon your channel.

[@learnomancer]

Thank you! Glad you find it useful. This kind of feedback is very encouraging for me :)

[@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 :)

[@hathspider9763]

Good video. But as always, until Storyline comes up with a solid solution for resizing it's unuseable. The resizing solution given here is not ideal as the element still moves on axis that has the animation. Such as the y-axis might stay the same but the animated x-axis doesn't which is obvous when applying the solution to the astronaut scene. And to be clear, it's not Learnomancer's fault, it's Storylines. Hat's off to Learnomancer for attempting to come up with a solution. It is however not ideal and will cause issues for anyone tyring to apply it.

[@learnomancer]

Thanks for commenting. You make a good point. I agree, the resizing problem sucks. I wouldn't say it makes using GSAP irrelevant, but rather situationally usable with the right precautions. :D Since releasing this video, I experimented with an alternative solution to the browser window resizing problem. It involves adding some Javascript code to refresh the window when the user resizes the browser window. It's much more straightforward than calculating and approximating positions, and useful for when you have multiple animations running. It has its own advantages and disadvantages. Details in my video here: kzbin.info/www/bejne/Z3Owk5lrm7lji5I I don't think Storyline will ever support this. They still struggle with minor feature requests such as making the "jump to previous slide" triggers not work like browser back buttons, even though people have been requesting constantly this for about a decade now.

[@hathspider9763]

@@learnomancer awesome, I'll check out the other video. Keep up the great work!

[@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

[@estellekrob]

Thank you! It's very clear. It seems, I've got a problem with my projet. When I publish, the result isn't the same if my window is small or big. Do you know where it can come from? Thanks for your help !!

[@learnomancer]

Hi. Glad you found it useful. So, the issue you're encountering happens because GSAP is not responsive. That means that animations do not adapt to changing window sizes. If you move a car 2 meters on a 10-meter long road, for example, the car will move 20% of the way (larger window). But if the road suddenly becomes 4 meters long (smaller window), the car will have moved 50% of the way. This can even mean that animations you preview using the Preview feature in Storyline may behave differently from those you preview when you're doing a Web export (because of different viewport sizes). Fixing this is not going to be straightforward, but there are some workarounds to this I've discussed later on in the video at 02:34:20 (such as using viewport height "vh" or viewport width "vw" instead of pixels while moving an object), or you can apply a workaround shown in a video here kzbin.info/www/bejne/Z3Owk5lrm7lji5I , which involves resetting the slide when the window resizes. The Learning Dojo channel also has a video on this topic, but the solution is a bit too code intensive for what it does: kzbin.info/www/bejne/gqu4gouDeMlricU Hope this helps!

[@almahaali4488]

thank u, so good i really love it

[@MichaelSongOfficial]

Can you please make more JS trainings or even courses on gamification for Storyline?

[@learnomancer]

That's what I'm planning. In fact, I got one coming up next week.

[@MichaelSongOfficial]

@@learnomancer that meant a lot. I've completed almost one third of your 3 hours training

[@MichaelSongOfficial]

wait... it's been 5 months until i found this.

[@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.