Interactive Storyline 360: Play and Reverse Animations on Hover with Javascript & GSAP

In this video tutorial, we'll experiment with event listeners for mouse hover using an execute Javascript trigger in Articulate Storyline 360. These event listeners will allow us to trigger some animations when the mouse hovers over an object, and when the mouse leaves the bounding box of an object. We will use these event listeners to play a GSAP animation timeline when we hover the mouse over a png image, then reverse (or rewind) the animation when the mouse no longer hovers on the image. I think this is a really easy to achieve effect, and the result is so much more responsive than the effect Storyline offers by default. I hope you enjoy this and use it in your projects! ____________ CHAPTERS: 00:00 Intro 00:24 Setup in Storyline 01:29 Play and reverse on mouse hover 04:28 Pop-up example 05:37 Multiple elements example 06:09 Adding timeline to function ___________ Check out the GSAP documentation featured in this video here: https://gsap.com/resources/getting-started/control/#control-methods Code available here: https://learnomancer.com/posts/play-reverse-animation-hover-storyline-360/ #storyline #articulatestoryline #javascript #gsap #storyline360 #elearningdevelopment #instructionaldesign #elearning #gsapanimation