Storyline

Enhance Your Articulate Storyline 360 Animations Using Greensock

Articulate Storyline 360 allows you to do basic animations within your courses, but it is pretty limited regarding what you can animate. It does simple entrance and exit animations, but that is about it: no easing controls, no repeats, and other standard animation capabilities.

Thankfully Articulate Storyline gives you another option. The exported courses use a JavaScript animation library called Greensock. Greensock gives you much control over your animations, which means we can have things animated precisely how we want with just a little code.

In this video, I walk you through how to get started with the basics and show you an example of how it can be used.

            //Reference the object
            var theObject = document.querySelectorAll("[data-acc-text='basketball']");
            
            //Animate in GSAP
            gsap.to(theObject, { y: 562, ease: "bounce.out"})
          

Jeff Batt

8 Nov, 2022