How GSAP can Transform Storyline Animations

Storyline360 has the GSAP engine build in. So you can use it directly. In fact most of Storyline's build-in animations are controlled by GSAP.

2 main issues using GSAP in Storyline. Scope...as each trigger has its own scope, it can be tricky. And when using Javascript Storyline's own timeline doesnot have any knowledge of any animations you do with JS and GSAP. Only way to give Storyline a clue about what is happening are variables. So scaling an element and then scaling the browserwindow will result in wrong positioning and scale of your GSAP controlled element. You can however tackle that. On my posts on the forum a lot about Javascript and GSAP as i use it in everything i do.

If you check my posts, you find a lot GSAP related tips and tricks, inclusief sample. Due to everchanging Html setup Articulate does, some onder sample might need some troubleshooting. Here eg. Is one of them.

https://community.articulate.com/discussions/building-better-courses/animate-storyline-groups-with-gsap#

Checking that one you can see its as easy as this:

gsap.to(yourselector,{duration:1,scale:2.45});

I made a few examples using GSAP. In this example, I explained how to integrate GSAP into Storyline, you can review it here. Link

Another example 

Amazing what one can accomplish with GSAP in Storyline.  While Math's posts have been very very useful, I wish Articulate would come up with a mini-guide on using GSAP. 

I've been searching for some sort of code, script, etc. that will allow me to scale an image to large to smaller, or vice versa, but I can't seem to find one anywhere. Any suggestions?