Documentation for GSAP in Storyline 360

The use of Javascript is not supported by Articulate, but some users on here may give you some help. For GSAP Math is probably the best person to ask, there is currently no documentation on using GSAP inside Storyline beyond what Math has posted.

You might try this site:  https://greensock.com/get-started/ 

Then you need to download GSAP, and call it using a trigger in your SL project to run the js script.

No need to download GSAP as its already in Storyline360. Only the bonusplugins are not. Check my posts to see what version GSAP in Storyline360 now is. Or run this code in your console..and it will return the version... gsap.version

For GSAP itself your best bet is the GSAP site.
https://greensock.com/gsap/
https://greensock.com/docs/
Top notch documentation ( Articulate take a look here ! ) and great samples and help from a very active forum.

Biggest thing to learn and watch when using GSAP in Storyline is selectors. You could use jQuery...or Vanilla javascript... in my posts quite a lot about it.

Also you need to be aware of several Articulate/Storyline pecularities. Eg. scope of triggers... and offcourse Storyline Player issues. As the Modern Player behaves quite different then the Classic Player your code and animations need to take care of that.

Another thing to watch is that Articulate converts the html in Storyline, both for Web as for LMS to their own kind of HTML. All text is put in spans and converted to SVG.. to name some of the pecularities. They for sure have their reasons for this, but in the end its no standard HTML5 anymore.

Hi  there guys,

I'm not sure whether this is the right spot to post this issue but here we go...

I'm not a coder by any stretch but having the ability to use GSAP in courses takes content and design to the next level... However I seem to have hit a snag 

• The course slide  is set to "Scale existing content to fit"
• I've added this snippet of code to trigger on entering a slide
• var tl = gsap.timeline({repeat: 0, repeatDelay: 0, delay:0});
  
  tl.fromTo("[data-acc-text='Cover1']", 1, {y:0, left:0, top:0, opacity:0, duration:0}, {y: 116, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay: -1.0, immediateRender:false}, 1);
  tl.fromTo("[data-acc-text='Cover2']", 1, {y:0, left:0, top:0, opacity:0, duration:0},{y: 114, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay: -1.0,immediateRender:false}, 1);
  tl.to("[data-acc-text='Cover2']", {rotation: -5, duration: 1.5, ease:"back.out", repeat:0, delay:-1.0});
  tl.fromTo("[data-acc-text='ReadMorePlus']", 1, {y:327, scale:0, opacity:0, duration:0}, {scale: 1, opacity:1, y:0, rotation: 360, duration: 1.5, ease:"back.out", repeat:0, delay:0,immediateRender:false}, 1);
  tl.fromTo("[data-acc-text='Button1']", 1, {y:576, opacity:0, duration:0}, {y: 414, opacity:1, duration: 1.5, ease:"back.out", repeat:0, delay:0,immediateRender:false}, 1);
  
  gsap.to("[data-acc-text='ReadMorePlusPulse']",{duration:2.0, alpha:0, scale:1.5, ease:Power4.inOut, repeat:-1, repeatDelay:2});
  gsap.to("[data-acc-text='ButtPulse']",{duration:2.0, alpha:0, scale:1.5, ease:Power4.inOut, repeat:-1, repeatDelay:2});

The issue being as I'm sure you've guessed is that the x and y coordinates get ignored when the browser resizes. Any ideas as to a solution for this..?

Thanks guys 

Yeah that is the infamous sizing issue. Change your x/y positioning to percent instead of actual pixels and its solved. But hence your code is only triggered on entering the slide...you need to add a custom Event that whenever the browser window is resized will act. I do have that in several projects.

This is the code you need for checking whether the browser is changed at any given time.

window.addEventListener('resize', resize);
resize();


function resize() {

/*
This function will be called whenever a user resizes his browser window.
So here you can act upon that and do whatever is needed.
*/

}

So basically this attaches a function to the window that calls the function resize().
So everything inthere will be done whenever a user resizes his window.

Thanks Math,

Very helpful :] I found a couple more of your post on the subject, really useful. I'll join the majority of respondents in saying it would be a great help if storyline made more noise about this... Best practice guide on how to implement it, code snippet resources, add it into the Storyline UI...

https://community.articulate.com/discussions/articulate-storyline/gsap-x-y-transformation-in-the-modern-player

https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360?page=2

Thanks again Math