Storyline & JavaScript

Add Emphasis Animations to Storyline with GSAP

In this video, we use GSAP to emphasize objects on stage in Storyline 360. I have had code out there showing you how to do the basics, but in this latest video, I simplified the code and showed an easier way to do mouse hover events and mouse out events within Storyline. That functionality is not native to Storyline, so using this simple javascript snippet, I show you how to trigger events even when someone moves their mouse off the object and fires code.

This Storyline and JavaScript series explores various things you can do with simple JavaScript snippets and how it helps you extend the capabilities of what comes out of the box with Storyline 360. Even if you are a beginner with code, I will show you how to quickly change settings to get the exact experience you want. Check it out.

// Selecting the elements
let features = document.querySelectorAll("[data-model-id='5vcGqLIG41f'], [data-model-id='6iZojGZhmC7'], [data-model-id='5vAXbgfhW2P']");

// Scale up
features.forEach(function(feature) {
  feature.addEventListener('mouseover', function() {
    gsap.to(feature, {scale: 1.06, ease: "back.out"});
  });
});

// Scale down
features.forEach(function(feature) {
  feature.addEventListener('mouseout', function() {
    gsap.to(feature, {scale: 1, ease: "back.out"});
  });
});
            

Jeff Batt

23 July, 2024