Storyline & JavaScript

GSAP is a VERY powerful JavaScript library. Articulate Storyline animations use the GSAP (GreenSock) library but keep it basic. Knowing a bit of JavaScript code, we can use the GSAP library. In the past, I have shown you how to move objects with GSAP, but it had an issue; everything was fine till you resized the browser. Once you did, it would reset the animation and not go to the location you wanted. In this ultimate guide to using GSAP positioning in Storyline 360, I show you how to move your objects on the stage to the exact location every time.

With this little JavaScript snippet, you can create a game board, have your objects move to the exact location you want them to, and even add on bounces and spring. It's easy to make the animations pop. In this video, I walk you through the code and show you how to update it to get the exact movements you want. There are so many possibilities with GSAP in Storyline.

let targetObject = document.querySelector("[data-model-id='6mrnVQJ3w4F']");
// let targetObject = object("6mrnVQJ3w4F")
let contentArea = document.querySelector('.slide-layer.base-layer.shown');
let animationDone = false;

if (targetObject && contentArea) {
    // Original dimensions in Storyline (define your original dimensions here)
    let originalWidth = getVar("playerWidth");
    let originalHeight = getVar("playerHeight");

    // Get the actual size of the contentArea
    let actualWidth = contentArea.clientWidth;
    let actualHeight = contentArea.clientHeight;

    // Calculate the scaling factor
    let scaleX = actualWidth / originalWidth;
    let scaleY = actualHeight / originalHeight;

    // Define target positions based on original dimensions
    let targetX = (1000 - 75); // Example: 100px from the left in original dimensions
    let targetY = 0; // Example: 600px from the top in original dimensions

    // Adjust target positions based on the scaling factor
    let adjustedX = targetX * scaleX;
    let adjustedY = targetY * scaleY;

    // Animate to the adjusted position
    gsap.to(targetObject, { x: adjustedX, y: adjustedY, duration: 1, onComplete: changeVar });

    // Add event listener for window resize to reset position
    window.addEventListener('resize', function () {
        if (animationDone) {
            // Recalculate the scaling factor and adjusted positions on resize
            actualWidth = contentArea.clientWidth;
            actualHeight = contentArea.clientHeight;
            scaleX = actualWidth / originalWidth;
            scaleY = actualHeight / originalHeight;
            adjustedX = targetX * scaleX;
            adjustedY = targetY * scaleY;

            gsap.set(targetObject, { x: adjustedX, y: adjustedY });
        }
    });

    function changeVar() {
        animationDone = true;
    }
}
Jeff Batt
9 July, 2024