Add Incredible Emphasis Animations to Storyline 360 with GSAP

[@Kragreth]

YES!! Love this code, worked first time and even used the "[data-acc-text='Camera']" accessibility text method mentioned in a previous video and it still works. I have also found that if you have an odd shaped image or object you want to animate in this way but it animates before the mouse gets to it because of its square bounding box that you can scribble draw in Storyline an object over your image and then replace that scribble's 'fill' with a picture from file and BAM you don't have that extra space!

[@LearningDojo]

Oh very smart! Love that.

[@bigvoodoo]

Very cool. New to the channel but long time SL user. I've mostly avoided JS in projects and I appreciate you making things like this understandable/approachable.

[@LearningDojo]

Welcome to the channel! Glad you are finding it useful. I am making a full course about this so stay tuned!

[@djumeau]

Oh boy! Just thinking of adding "mouseclick" event listeners and extend SL sounds so cool!

[@LearningDojo]

Would love to see what you come up with but yeah love that you can use mouse out events. Not sure why Storyline doesn’t use that event out of the box.

[@djumeau]

@@LearningDojo I would not be surprised if they are able to do that. Let's see in a future update.

[@nerdypeachmango]

This is so cool. I stumbled across a post on elearning heroes about GSAP & storyline animations and you just happen to have a new video on it! Thanks for the info!

[@LearningDojo]

That is perfect timing right there 😁. I have a lot of GSAP videos so make sure you check all of them out!

[@stephenjones3468]

I had some luck using the let features = document.querySelectorAll("[data-acc-text='feature_1'], [data-acc-text='feature_2'],[data-acc-text='feature_3']"); I changed the accessibility : Alternative text: That way I did not have to inspect the code to find the object id. Don't know if it will work for other projects.

[@LearningDojo]

It does work but worry is accessibility text could also change and if you add actual accessibility text you could break the code so I like using the module ID but this works too.

[@danielk1ss]

If I want the animation to happen on click for both scale up and down, how shall I do it? It doesn't work when two 'Click' addEventListeners are in the JS.

[@LearningDojo]

Like after the first animation is done? There is an on complete command you can run som something like this. scale: 1.5, // Scale up by 1.5 times onComplete: function() { gsap.to(targetObject, {scale: 1}); }