For this week’s E-Learning Heroes Challenge, inspired by the Pantone Colour of the Year, Cloud Dancer, I wanted to explore how motion and perceived depth could be pushed further within Articulate Storyline with the help of the GSAP animation framework.

Following up on my infinite scroll illusion effect that was the centrepiece of last year’s entry, this time I wanted to create the illusion of a living, breathing scene that subtly responds to user movement. The result is an interaction where illustrated elements appear to rotate and drift in three-dimensional space as the learner moves their cursor across the slide stage, even though everything is built using flat 2D shapes.

The Core Idea

At first glance, the interaction gives the impression of a true 3D environment, with objects gently rotating and shifting perspective in response to horizontal mouse movement. In reality, no 3D models are involved at all.

Instead, the effect is achieved by breaking the illustration down into multiple individual shapes and layers, each of which moves, scales and rotates at slightly different rates. When combined, these subtle differences create a convincing parallax-style depth effect that feels tactile and immersive without introducing unnecessary technical overhead.

How the Effect Was Built

The interaction is driven entirely by JavaScript animation using GSAP, executed from within Articulate Storyline via Execute JavaScript triggers.

As the user moves their mouse from left to right across the slide stage, the cursor’s X position is tracked and normalised into a usable range. That value is then used to drive multiple GSAP timelines simultaneously.

Each visual element in the scene has its own motion profile. Some shapes translate more dramatically, others rotate by only a few degrees, and some scale ever so slightly to reinforce the sense of depth. Because each element responds differently to the same input, the scene never feels flat or rigid.

This approach mirrors techniques often used in game development and interactive web experiences, but adapted carefully to work within Storyline’s player environment.

Masking and the Role of ‘Cloud Dancer’

A key part of selling the illusion lies in the masking. Rather than simply moving objects freely across the stage, masks are used to reveal and conceal portions of the artwork as elements shift position.

The soft, muted Cloud Dancer colour palette plays an important role here. Its light, airy tone allows overlapping shapes and masked transitions to feel natural rather than distracting. The masking subtly hides the mechanics behind the motion, creating a calm and slow paced experience that the user can explore and relax into.

Why GSAP Makes the Difference

While it is possible to animate objects in Storyline using timelines and triggers alone, this type of interaction would be extremely difficult to manage using native tools.

GSAP offers precise control over easing, timing and transformation, all while remaining performant inside the browser. More importantly, it allows multiple animations to be orchestrated from a single source of input, in this case the mouse position, without creating a tangled web of Storyline variables and triggers.

This makes the interaction both smoother for the learner and far easier to maintain or extend for future projects.

Inspiration and Creative Direction

The visual and interaction design for this project was inspired by the work of Rive developer vitaliys, whose experiments with depth, motion and subtle interactivity demonstrate just how expressive layered 2D animation can be. Exploring that work helped shape both the technical approach and the restrained, elegant feel of the final experience.

You can find their work here: https://rive.app/@vitaliys/

Final Thoughts

This project was an opportunity to push Articulate Storyline beyond its usual boundaries and demonstrate how external animation libraries like GSAP can unlock a new category of rich, responsive interactions.

The underlying techniques are intentionally lightweight and browser-friendly, making them suitable for real-world eLearning use rather than just experimental demos. With careful planning, the same approach could be applied to product explorations, scenario-based learning, or any experience where subtle motion helps guide attention and enhance engagement.

As with last year’s entry, this has opened up several new ideas I am keen to explore further. If this interaction sparks ideas of your own and perhaps inspires you to learn more about how you can work with GSAP in your own Articulate Storyline work, then do consider joining one of our fully-online virtual masterclass training courses scheduled in the New Year.

I think you’ll be amazed by what becomes possible when Storyline and modern animation techniques work together!