Articulate Storyline & GSAP

[thediciplematt]

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

[ZachSaucier]

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?

[thediciplematt]

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?

[ZachSaucier]

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  

[Math]

The latest version of GSAP, 3.5.1 is included in Storyline and can be used directly. Not the plugins though, but the core version is included.
https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360

[Quasimodo]

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.

[Math]

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

[Quasimodo]

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.

[pxb179]

On 1/12/2021 at 6:31 AM, Math said:

The latest version of GSAP, 3.5.1 is included in Storyline and can be used directly. Not the plugins though, but the core version is included.
https://community.articulate.com/discussions/articulate-storyline/gsap-3-5-1-latest-version-is-now-included-in-storyline-360

Hi Math,

I've read a lot of your posts on GSAP in the Articulate community board. I appreciate all of your work in promoting this tool. My institution purchased a license for the additional plugins (I'm attempting to use MorphSVG now), but I'm having trouble getting this to work in Storyline. I've attempted to add the plugin by referencing it in the "story.html" file generated through publishing the projects, shown below. This doesn't work. Any tips?

 

<script src="html5/lib/scripts/MorphSVGPlugin.min.js"></script>

 

[GreenSock]

Hi @pxb179. Thanks for joining Club GreenSock! 🥳

 

It's hard to know what's going on without a minimal demo, but it sounds like just a path issue, like you haven't put the MorphSVGPlugin.min.js file at that location that you're referencing. Make sure your path is correct and the file is actually where you think it is. 

[Math]

As Jack states its hard for Greensock forum members to help in Storyline related issues. For us Storyline designers/developers its in the contrary hard to make a 'minimal demo' in Codepen especially because Storyline creates its own custom HTML ( when publishing as Web or Scorm ).

As Articulate and its CTO recently recognized ( https://community.articulate.com/discussions/articulate-storyline/storyline-under-a-microscope-an-update-from-the-cto ) the many bugs and troubles Storyline poses on its users i do hope there might be a wind of change for the future.
As one of the spearpoints of the change is going to be making Storyline 64bit ( it is still 32bit ) i will be advocating them to choose a Webbased solution instead of a installable tool ( as it is now ). Also i will ask them to get in direct contact with Jack and the Greensock development team. As is Storyline already depends heavily on GSAP. Why not ask Jack and his team how to cooperate on making better use of that. Ideally i see a product in which you easily can make GSAP based animations, extend them with Javascript and all the plugins for GSAP and create a HTML-based Scorm output in the end to put in your LMS ( Learning Management System ). A modular future proof approach is offcourse needed for that.

So much for the future. To help you with your issues at hand i suppose the Elearning Heroes forum is a better place to get started.

 

Here i describe precisely how to use thirdparty Javascript libraries ( in this case jQuery, but you can add GSAP too like this ) in Storyline.

https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
I recommend using the WebObject approach then you can add all wanted plugins and load them when needed.
 

Here some more inside info on SVG in Storyline...
https://community.articulate.com/discussions/articulate-storyline/change-an-illustrator-svg-inside-storyline-with-gsap

If more help is needed you can contact me directly.
Kind regards,
Math

[GreenSock]

Thanks for chiming in, @Math! Sounds like you're quite connected with the Storyline world and an advocate for GSAP there. 💚

[Math]

Greensock member since begin 2014  And working with TweenMax/Gsap since Flash... then mostly games and webbased projects, later on elearning projects. In both ELB Lectora and Articulate Storyline promoting the use of GSAP.

[Math]

@pxb179 I just doublechecked and tested my workflow for MorphSVG in Storyline.
As you can see here... https://360.articulate.com/review/content/7b1ca052-61f3-4851-bf9e-0a50525acbb3/review
this works fine. Using a WebObject for loading GSAP and the plugins you can then target the SVG at will and morph them.

However this is not easy as Storyline treats SVG somewhat weird and its tough to get the path selected properly with Javascript in Storyline.
As this was a sample i used at some presentations at Articulate Usersdays showcasing the MotionPath plugin ( and now also the MorphPlugin )

i cannot share this here right away.

Basically the setup is like shown in here...
https://community.articulate.com/discussions/articulate-storyline/how-to-add-jquery-or-anyother-external-javascript-library-to-storyline
In the image below you see how i structure my WebObjects folder.

When the external libraries are loaded i set a variable to True. A trigger in Storyline will act when the variable changes and registers the

used GSAP plugins. Showing that below.

Now you can use the MorphSVG plugin.
There are some catches however. The way Storyline treats SVG is not standard. If you insert a SVG directly in Storyline it will treat it as SVGimage and thus you will not have access to properties like 'd' or 'path' from the SVG and thus cannot get GSAP to work on it. On the Elearning Heroes forum you will find more info on that and how to fix it. The sample i showed above uses Storyline's own shapes that stay as proper SVGs. You can also add Illustrator or other SVGs and work with them, but the trick to prevent Storyline from converting them into an image is, copying and pasting it directly from Illustrator to Storyline ( Windows only ). Then the SVG will be converted to a .emf and that file you can ungroup in Storyline and then it is a fully editable SVG shape. I know...its overly complicated and cumbersome. Let us hope Articulate fixes this soon.

So how to target the SVG ?

As you can see in the image below i use the order of the timeline in Storyline to know what element i want to change into.
Storyline counts up from the bottom... i have my 3 SVG shapes on top... so those are div:nth-child(23),24 and 25. There are other solutions to select the SVG shapes you want to Morph, but this is the simplest way. With the convertToPath helper function you can convert it to a proper path... and then run your Gsap animation Morphing them.

I do hope this helps you... if anymore help is needed, do contact me directly.

Kind regards,
Math