Articulate Storyline Community
Laila Berri
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.
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.
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,
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.
-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,
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?
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.
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 ( -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.
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.
@pxb179 I just doublechecked and tested my workflow for MorphSVG in Storyline.
As you can see here... -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...
-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