GSAP in Articulate 360 - Storyline 3

[Spo]

Does anyone have some advice on how to use greensock in Articulate 360 - Storyline 3?    I have created a webObject with this address in it:  https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js 

 

I then put this code to test it works in the object (in this case a picture called Picture 1):     TweenLite.to(Picture 1, 1, {scaleY:-0.5});

 

 I am getting nowhere fast.  If anyone has been able to do this I would love to here from you.   Thanks.  

 

[PointC]

I'm not at all familiar with Articulate 360 and I don't recall it being mentioned in the forums before now. Someone around here may have some knowledge about it, but I'm guessing you'd have better luck posting in their discussion forum.

 

https://community.articulate.com/discuss

[PointC]

Correction: there was this post:

I have no idea if that will help, but that's all I could find.

[Spo]

Thanks....   I read that one...   he says

 

" I am using Greensock to add HTML5 animations to Storyline (eLearning tool) it will allow you to add web objects to a slide. I have figured out how to communicate between my hand coded GSAP animations and Storyline just fine by targeting the iframe that the web object lives in. "

 

But I do not understand what he means, I found three other people who say it is easy to do, but none expain how to do it. 

1. What to populate the webObject with?  Just the address to greensock?

2. Simply put the code from greensock into the javascript associated with the object you want to animate?

 

I am determined to figure this out as there are several animations that I would like to use to extend the functionality of motion in Storyline. 

Thanks for your help though PointC.

-joe

[Sahil]

GSAP works with any JavaScript objects. When it is working with DOM elements like div etc and if you try to change the scale, GSAP will use the CSSPlugin to apply changes in CSS.

 

Now your snippet,

 

TweenLite.to(Picture 1, 1, {scaleY:-0.5}); 

 

That is incorrect because object names cannot have spaces, so you must be getting errors in console. In order for that to work your object name should be without spaces, if it has spaces then it isn't an object. Second, your Picture1 object must have a scaleY property so you can use it to animate.

 

I am not sure what kind of output you get with Articulate 360, if you can post a super simple demo on Codepen then I can take a look at which properties can be animated.

 

A quick google search shows you can manipulate it with JavaScript but one page I visited only had examples to call functions.