Storyline360, Animation and GSAP ( Greensock )

Thanks @Math Notermans for sharing your examples using Storylines included GSAP library. This can be very useful for building our more interactive animations!

I've used GSAP to develop Flash objects in the past, and I'm excited to see that it is possible (though not officially supported) to use GSAP with Storyline.

While playing around with your first example (BuiltIn-TweenLite.story) I noticed that the location of the 'Judge-hammer.png' image moves around if you re-size your browser window after interacting with the activity.

I am building something that uses several animations on a slide and didn't want them to move around on the stage if the user suddenly decides to resize the browser window. I decided to built off of your example and target the 'transform' CSS rules for the hammer image (TweenLite.to actually changes the matrix of an item instead of the existing transform properties) so that they remain in line with their original location on the slide. I did have to add quite a bit of JavaScript to accomplish this, making it more complex than I originally wanted it to be, but it works fine for my purpose so I thought I would share.

I changed quite a few things, and added a few more triggers, so it might be too complex to easily reverse engineer, but it might act as an example of what can be done with JavaScript and TweenLite. For anybody reading this, my example uses specific ID's and Class names that exist in the current version of Storyline, but may not in the future. If this changes, then the file I'm sharing today would no longer work.

A more simple solution for using TweenLite in Storyline might be to just use the classic player as @Math Notermans did in his second example (Multipoint-Animation-TweenLite.story) so that you don't have to worry about device or browser window size affecting how the GSAP TweenLite animations behave. The classic player size is not responsive, so things stay inline in proportion to where they started.