Jump to content
GreenSock

thediciplematt

Articulate Storyline & GSAP

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

I'm attempting to integrate the GSAP CDN with Articulate Storyline. Does any body have experience with this? How do I get the Javascript created program to pull from GSAP's network?

 

See the Pen by (@) on CodePen

Link to comment
Share on other sites

Hello Matt and welcome to the GreenSock forums.

 

Did you mean to link a CodePen demo? 

 

I've never used Storyline before. It looks like some sort of website creator for educational purposes?

 

If Storyline enables you to add external scripts you can link to any GSAP CDN and then start using GreenSock in your JS. What problems have you been running into?

Link to comment
Share on other sites

Thanks for the response. I'm new to this forum and just followed the prompt that the system gave me.

 

Storyline is an eLearning authoring tool. You can add in Javascript into the system. I know how to add the code in but how would I go about adding the code + linking it to the object I want to manipulate.

 

Ex. if I wanted a square to move 100 pixels to the right.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> 

Here is what I found on the GSAP site. Any input on how to add the animation that i want?

Link to comment
Share on other sites

After you load TweenMax (like you did above) in your other JS you should be able to use GSAP as you normally would.

 

4 minutes ago, thediciplematt said:

if I wanted a square to move 100 pixels to the right

TweenMax.to(".square", 3, {x: 100});

The above would move all elements with a class of "square" to the right 100 pixels over the course of 3 seconds. 

 

So you could put it in another JS file that you link (like index.js or main.js if you have those). Or you could put it within some <script></script> tags.

 

You should check out our "Getting Started"  article for more information about how to use GSAP :) 

Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...
On 10/22/2019 at 1:42 PM, thediciplematt said:

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"

Greetings. Following up on the Storyline question since the Storyline 3 version does not support GSAP.

... the <script> and </script> tag is html to indicate that whatever is within the tag is js. Is that a correct assumption? If so, can I use what is within the tag, ie 

src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js">

and shouldn't that work as a js instruction that I could use in the javascript editor in Storyline 3 to initialize GSAP so I can then go ahead and use it? I tried that but with no success. Can you please kindly advise if there is a right way of initializing the GSAP using only js so I can use it. I, of course, do not have access to the Storyline html. Thanks so very much,

Daniel B.

Link to comment
Share on other sites

Indeed Storyline3 doesnot ( yet or maybe never ) supports default GSAP3. Storyline360 does. I work with SL360, so i cannot test with SL3, but i suspect that SL3 supports TweenLite default. You can however indeed add GSAP3 as an external library without any issues and use the newer version. My posts on  GSAP on the Elearning Heroes community mostly deal with SL360. But checking older posts when GSAP3 wasnot yet implemented in Storyline you will find solutions on how to add GSAP to Storyline. Either by using a WebObject to add the libraries, or by using the resources in the player... or by manipulating files in your published output or default Articulate folder in Programmes(x64).

Here some older posts on GSAP in Storyline.
https://community.articulate.com/discussions/articulate-storyline/storyline360-animation-and-gsap-greensock
If needed i can mock up a Storyline with an approach i guess will work in SL3...
Kind regards,

Math

  • Like 1
Link to comment
Share on other sites

Yes please, please. If you could just guide me as to how to set up the GSAP, as you suggested with WebObject.

I tried using TweenLite but that doesn't seem to be supported.

I tried to edit the published output, but could not get it to even open in TextEditor, so not sure how to open the published output.

Not sure what you mean 'using the resources in the player', kindly explain please.

Thanks.

D.

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.
×