Jump to content


GSAP in Articulate 360 - Storyline 3

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.  


Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

Correction: there was this post:

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

  • Like 1
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.