Add Incredible Emphasis Animations to Storyline 360 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.
Also check out the website I refer to here https://learningdojo.ninja/javascript... or copy the code below.
Code
// 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"});
});
});
Chapters
0:00 Introducing the goals of the video
0:31 Where to find the code needed
0:54 Previewing what we are going to do in Storyline
1:22 Why we need to code this animation
1:57 Exploring the Javascript trigger in each object
2:42 Overview of how to find the Model ID
4:27 Adding a stage object for the hovering state
5:10 Adding in the magic trigger
5:52 If you aren't confident about coding, here's what to do
6:12 Where to change the IDs
6:40 Changing the IDs to target different items
7:17 What's happening inside the code
7:45 Creating loops with the arrays
7:58 Diving deeper into understanding the functionality of the code
8:08 Having an Event Listener instead of a Loop
8:22 Benefits of having a Loop in the code
8:41 What and Event Listener does
9:03 The type of Event this code adds to Storyline
9:37 The difference between the two triggers/code
10:13 Seeing the triggers work in the preview
10:51 Review of what the code is doing
11:19 Giving support
12:40 Outro
🥷 Link to Full Courses
Articulate Storyline 360: https://www.udemy.com/course/create-e...
Adobe Captivate: https://www.udemy.com/course/adobe-ca...
xAPI Fundamentals: https://www.udemy.com/course/xapi-fun...
Camtasia: https://www.udemy.com/course/masterin...
Articulate Rise 360: https://www.udemy.com/course/create-r...
If you would like learn more visit https://learningdojo.ninja.