Articulate Storyline

Loop Animations in Articulate Storyline 360 with GSAP

There is not really a good way to loop animations in Articulate Storyline 360. Especially single objects. You could add a trigger at the end of the timeline to repeat the timeline but it repeats everything. I mean everything! What if you wanted to just loop one object on the stage in Storyline?

That is where GSAP comes into play. GSAP formally known as GreenSock is a JavaScript library that is already included as part of Storyline 360 when it gets published which means with some simple JavaScript we can target one object in our e-Learning course and loop that object over and over and over. We can even define how many times and how quickly the loop goes.

In this video I walk you through how to target these objects in your eLearning development course and how to add on some of this GSAP (GreenSock) code to loop.

let gear = document.querySelector("[data-acc-text='gear']");

gsap.to(gear, { rotation: 360, repeat: -1, duration: 3, ease: "none" });