How to Sync GSAP Animations with the Articulate Storyline 360 Slide Seekbar

Developers who are familiar with Articulate Storyline 360 will already know how powerful the Storyline authoring environment can be for interactive eLearning. Many will also know just how impressive the GSAP library is when it comes to fluid, high performance animation on the web. What often surprises people though is that Articulate already bundles GSAP into every course published from Storyline, so anyone can start using advanced animation techniques without adding any external scripts.

There is one hurdle to overcome. Storyline does not currently provide a built in user interface for GSAP or a native integration that makes timed sequencing simple. This means all GSAP work inside Storyline is currently handled using Execute JavaScript triggers. It is workable, though it can sometimes feel like the timeline, triggers and GSAP are fighting one another to take control.

This guide introduces a simple and reliable solution that gives control of GSAP animations to the learner through the native Storyline slide seekbar! This makes the animation fully interactive. When the learner scrubs the timeline back and forth, the GSAP animation rewinds and replays smoothly in sync. In the example below, a small bee character moves and scales as the user controls playback.

This method gives complete creative freedom to build Storyline animations that feel dynamic and modern while still respecting the familiar interface learners expect.

Step One: Capture the Current Seekbar Time

The first objective is to keep Storyline and GSAP working together by tracking the current slide time in milliseconds. A small script continuously polls Storyline’s internal timeline data and stores the current seekbar value in a Storyline Number Variable named CurrentTime.

Add this JavaScript as a trigger when the timeline starts:

Code Snippet: Get the Current Storyline Slide Time

Once this is active you will see CurrentTime update continuously whether the slide is playing or the seekbar is being manually scrubbed.

Step Two: Sync GSAP to the Storyline Timeline

Now that Storyline is passing accurate seekbar timing to GSAP, the next step is to use that value to move your target object through the GSAP timeline exactly as the user expects.

Before this works, create two more Storyline Number Variables:

• Startms
• Stopms

These values allow you to define exactly when during the slide timeline your GSAP animation should begin and end.

Next, create another JavaScript trigger firing When Variable Changes on CurrentTime and paste in the script below.

Code Snippet: Sync Storyline Time with GSAP

This ensures GSAP always knows exactly how far through the animation it should be, perfectly matching the seekbar movement.

Step Three: Prevent Storyline Restoring Object Positions

There is one final issue you will notice. If the learner drags the seekbar backwards, Storyline tries to reset objects to their original position stored in the base timeline. This overrides your animation instantly.

The fix is simple. Move your animated object into a separate slide layer.

On that layer:

• Disable timeline seeking for objects by leaving them uncontrolled by the base layer timeline
• Show the layer on timeline start so both play together
• Ensure the correct data model ID is still targeted by your JavaScript

With that adjustment, Storyline no longer interferes and GSAP remains completely in control.

Taking Your Storyline Animation Skills Further

This example only scratches the surface of what is achievable when combining Storyline 360 with GSAP. At Discover eLearning we teach advanced techniques including physics based animation, responsive movement, user driven motion, creative mask effects, and the use of intelligent AI agents inside Storyline.

Visit the Training section of our website to explore upcoming live workshops and online courses that will help elevate your Storyline development skills.

If you found this method helpful, you may also enjoy our Storyline Magic Series on YouTube where more inventive tutorials for Articulate Storyline 360 developers are released regularly.

Thank you for reading and enjoy experimenting with GSAP in your next Storyline project!