GSAP 3.5.1 ( latest version ) is now included in Storyline 360

Thanks for that Math.  What methodology did you use to find the structure, to track down the SVG to alter?

I'm trying to figure out how far we could push js control in Storyline, for example could trigger equivalents be dynamically added to objects, could functions dynamically read which object triggered a call, that kind of thing.  I currently have Animate CC but may well lose that in the future, but I'm guessing any semi-advanced coding will have to be developed outside and brought in as webobjects, trying to work inside Storyline will likely be too much of a headache.

Hi Math,

please forgive the "stupid questions", I'm a total beginner when it comes to javascript/GSAP.

• GSAP only works with imported SVGs, right?
• Is it possible to zoom in/out images using GSAP?
• If I want to learn more about GSAP and how to use it in Storyline: What would you recommend? How should I proceed? What should I look at most? Javascript to begin with?

Many thanks in advance. :-)

Hi. Now that I made Storyline 3 stand at attention with GSAP yet another question has arisen for me. Sorry if it's annoying...

The command line:

var element2Animate = document.querySelector("[data-acc-text='star']");

for example, uses the text within an object to gain control of it (in the above case ,it's 'star'). But what can I do if I don't want to place any text within the actual object whatsoever? In the SL timeline I can change the 'name' of the object on the leftmost, white part of the timeline but the text that appears in the light blue part of the timeline can only be changed by actually typing text in the object (to the best of my understanding). Without adding any text within the object, is there a  way to access the object, I guess, is my question.

I hope my question is clear and not too annoying.

Thanks,

Daniel.

Hi Math.

Thanks so much for your in-depth explanation. Yes, SL3 does have access to the accessibility name which can be changed in the pop-up, as you explained. Curiously, that doesn't update the accessibility name as it appears in the timeline, but that's a small detail.

The GSAP libraries are easily accessible in SL3 (and they work!) once I figured out (thanks to you) how to add them in, so no problem there.

I've learned so much thanks to you and your great explanations, so thanks again.

D.

This is great news. Thanks for sharing, Math.

Thank you so much! :) Is this a good overview about all the possible "features"? https://greensock.com/docs/v3/GSAP

Am I right we can't use GSAP plugins like flip?

The plug-ins are not default included in Storyline. You have to add them. You can use them. I have them included in most projects and do use them all the time.

Especially the SVG plug-ins i love. Check my posts on them.

Hi Math,

I have been intensively dealing with GSAP in the last few days and have to say: Great solution!

Now I have encountered a problem: When I animate elements e.g. like this:

var tl = gsap.timeline();

var icon= document.querySelectorAll("[data-acc-text='icon']");

tl.to(icon, {repeat: 10, yoyo: true, ease: "power1. inOut", duration:2, repeatDelay: 0.25, scale:1.45 });

Then I have the problem: As soon as I change the screen size form my browser or change the format on the mobile (e.g. to landscape format), the animated elements are suddenly in completely different positions or not visible at all. Is there a way to solve the problem?

Yeah that is the position issue Owen mentioned before. Several fixes for that... if you refresh your browser after the change of size...well the positions get updated properly...but it might that thats not what you want.
Some of the other options are...
- using fixed elements in the Storyline for reference positions ( if you check my samples you find solutions for that )
- use vw (=viewportwidth) and/or vh (=viewportheight) for your animations. That is relative and thus can work properly.
- add a eventHandler for the browserchange.. JQuery has resize( ) for that... in Vanilla Javascript something like this works too..

var wrapper = document.getElementById('#wrapper');
window.addEventListener("resize", function(){
if(window.innerWidth < 768){
console.log('narrow');
}
else{
console.log('wide');
}
});

I attach a older sample that has some of the functionality needed in it. Not all, but with some puzzling and downloading some of my samples you should be able to figure it out. When time permits i mock up a new fully functional sample. At the moment no time alas.