Storyline360, Animation and GSAP ( Greensock )

Hey Math, sorry for the late response. I saw your reply as soon as you made it but was too busy to dig into it until today. Thank you so much for sharing this! The .story file you shared is very useful. I will definitely be referencing it in future projects. The example you made is great. I've checked your other posts and see a variety of very interesting examples you put together. Also, thanks for letting us know that GSAP 3.5.1 is now the default in Storyline 360. This is great news!

The one issue this example doesn't seem to solve is the browser resize issue. If a GSAP animation finishes, and the browser is later resized, The animated object will no longer start at its original location on the slide. In the example you posted with the stick of candy (obj01.png). If you resize the browser, the stick of candy no longer starts from either its original location, or its last position in the animation. For some reason, GSAP seems to automatically animate off of it's previous translateX() and translateY() values to perform animations instead of the new values that Storyline assigns to it when the browser is resized. At least thats what it looks like to me. This is why I used the onUpdate: and translate3d(" +  method on the example that I had posted in my previous comment. It seems to fix this so that the item always animates from the correct position in relation to where it should be the slide, even after a browser resize.

If the starting location of the animated object doesn't matter much, as in your example then it's fine to use the default gsap.to function without using onUpdate:. In my case I'm creating an animation where distance and location need to be exact as it is demonstrating a measurement. I don't want it to display incorrectly in the case of a browser resize.

After typing this out, it occurs to be that I there are probably other ways to accomplishing this, such as placing both beginning and end shapes inside of Storyline, then using gsap.set place an item to its start position and gsap.to to animate it to it's end position. I think that's what I'll try next and see if that holds up after a browser resize.

Once again I just wanted to thank you for your responses and for sharing with the community! It is definitely appreciated.