Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
5 years ago

Storyline360, Animation and GSAP ( Greensock )

Hi, Trying to figure something out in SL360 i stumbled upon  the ds-bootstrap.min.js file thats added to the lib/scripts folder when publishing a Storyline360 file. In that file are GSAP(Greensock...
storyline 360
TylerPerras's avatar
TylerPerras
Community Member
5 years ago

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.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    5 years ago

    Nice T.P, will check this out tomorrow. This post on Gsap and TweenLite somewhat polder anyway, if you check some newer posts from me jou find solutions with TweenLite that maintain perfect position. Found quite some differences in the Modern player vs the Classic player and know how to handle that. Gladly share knowledge and tips and trucks on Gsap , Storyline and animation. Even managed to Morph  svg shapes inside Storyline with MorphSvg 

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    5 years ago

    Here one later sample T.P in which  i have a check to see whether the Classic or Modern player is used on based on that uses a calculation that gets the proper x position. Your method of using onUpdate and CSS Transform and the idea of giving an element ( or elements ) a specific ID at start i do like. Especially the idea of giving the element a specific ID i find usefull, cause that i often find cumbersome when working with JS in Storyline.

    I do have a function that gets all elements in a scene in Storyline.. might be good to add this to it, so at start everything has a proper ID.

    As said i got a setup working now that checks whether you publish in Classic Player or Modern Player mode. Based on that getting the x/y position is somewhat different for the player.

    Check that here...

    Modern Player version
    https://360.articulate.com/review/content/3ec783f4-cb1e-4843-9aeb-a98abf1b1684/review

    Classic Player version
    https://360.articulate.com/review/content/adedaa1a-ce3f-4b87-9092-e4aeeb597c01/review

    Clicking the 'move to spots' button triggers a animation that moves the candy to the endposition of the 3 spots. You can drag the green spots around to change the positions. When clicking the button the candy moves to the correct spot and the variables are updated.

    The biggest issue, especially because the Classic and Modern player behave somewhat differently, was the x/y translation of the player ( Storyline slide ) on a webpage of a given size.
    Figured that out and now on any device ( testing needed for that ;-) the x/y position of elements should be good. To get and set for animation.

Related Content