The ULTIMATE Guide to GSAP Positioning in Storyline
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.
Code Snippet
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;
}
}
Chapters
0:00 Introducing the topic
0:37 What we want to animate in Storyline
1:18 What is GSAP?
1:47 The code needed for this video (Listed in the description)
2:04 Previewing the final result
2:36 The benefit of using GSAP positioning
2:57 Targeting the object in the Storyline Javascript
3:34 Grabbing the ID of the object through the Inspector
5:04 Adjusting for different sizes
6:01 Accounting for the original width & height
7:11 Javascript steps and variables
7:46 Creating the actual width & height
8:04 Explaining what "Client" is
8:17 Getting the scale X & Y values
8:53 Getting the target X & Y values
9:08 Why we need to minus 75 pixels
10:21 What you would change in the provided code
10:37 Exploring the height
11:20 What the code is doing
11:37 Breaking down the GSAP line of code
12:46 Creating a new button and adjusting the code
14:20 Where this positioning can be applicable
15:10 Showing support
16:13 Outro
🥷 Link to Full Courses
Articulate Storyline 360: https://courses.learningdojo.ninja/c/...
Storyline & JavaScript: https://courses.learningdojo.ninja/c/...
Adobe Captivate: https://www.udemy.com/course/adobe-ca...
xAPI Fundamentals: https://courses.learningdojo.ninja/c/...
Camtasia: https://www.udemy.com/course/masterin...
Articulate Rise 360: https://courses.learningdojo.ninja/c/...
If you would like to learn more, visit https://learningdojo.ninja.