Forum Discussion
Storyline360, Animation and GSAP ( Greensock )
Hi,
Trying to figure something out in SL360 i stumbled upon the ds-bootstrap.min.js file thats added to the lib/scripts folder when publishing a Storyline360 file. In that file are GSAP(Greensock) references... some samples../*!
* VERSION: 1.11.8
* DATE: 2014-05-13
* UPDATES AND DOCS AT: http://www.greensock.com
*
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
*/
What i can find in that file that both GSAP CSS-plugin, easing and basic GSAP tweens are somehow used in Storyline.
Bad news however is that its a really old version they have implemented... from 2014... version 1.11.8, whereas the current GSAP version is version 3.5.1 !!!
Big advantages of the newer GSAP are mobile performance, speed and perfect control over SVG. So Storyline would certainly benefit from updating their internal used Storyline to the latest version.
As Storyline probably uses GSAP for all its animation features, the transitions and everything, i personally would really like it to have the control of GSAP in the hands of the frontend-user. I do use GSAP constantly in my elearning projects, but always have to add the newest version..
Is there an option to get the latest version of GSAP implemented in Storyline?
And can we have some better scripted control over Storyline elements...as you do use it already anyway?
Kind regards,
Math Notermans
- MathNotermans-9Community Member
As said in this post i found evidence of Storyline360 using Greensock's library. So i wanted to figure out what is possible with it without the need of adding the newer libraries of GSAP 3.
Well as you can see in the attached SL360 file Articulate uses TweenLite version 1.11.8, on publishing it shows that in the console.
So right of the bat, without any extra code libraries you can use TweenLite code like shown in the sample.
Because Articulate removed JQuery from its common scripts, we cannot use JQuery selectors without adding extra libraries. So selecting the element on stage is selected by using a document.querySelectorAll for a given 'acc-text', and then moved by TweenLite.
So using code like this..var hammerElements = document.querySelectorAll("[data-acc-text='hammer01']")
TweenLite.to(hammerElements[0], 1,{x:"+=25"});
You can animate anything with code in a default Storyline.
Alas TweenMax and GSAP plugins are not available default...
Kind regards,
Math - MathNotermans-9Community Member
https://360.articulate.com/review/content/c9c0450c-0814-4492-bc02-5192e40017b9/review
Diving a bit deeper into TweenLite in Storyline...
Quite interesting this is possible without using extra libraries... :-) - TylerPerrasCommunity Member
Just an update. The
gsap.set
function turned out to be exactly what I was looking for. What I do now have 2 images. one on the slide and one off of the slide. When the user clicks a button, the one on the slide gets hidden, and I use its position to place the one that was off of the slide. This way the position is always correct regardless of how the slide is resized.I used your method to accurately gather the position of objects on the slide. So far it works great!
Edit: Changed
gsap.to
togsap.set
as that is what I meant to type - Jürgen_Schoene_Community Member
one small addition - the storyline char encoding for the vector text is sometimes a bit strange
"f" -> \uE000
correctStr = correctStr.replaceAll("\uE000", "f")
- MathNotermans-9Community Member
Thanks Jurgen for this addition as it puzzled me ;-)
- MathNotermans-9Community Member
@Jurgen How you find those codes for encoding? Run into the fact that 'fi' , for example in 'textfield' also gives errors and cannot find the proper code for this ?
- PhilMayorSuper Hero
Ligature Unicode for fi are here https://www.fileformat.info/info/unicode/char/fb01/index.htm
Sent from my iPhone
- Jürgen_Schoene_Community Member
storyline don't use the normal unicode points for "f" and the "f"-ligatures
f: \uE000
ff: \uE001
fi: \uE002
fl: \uE003
ffi: \uE004
ffl: \uE005I have not found any other special cases so far
- MathNotermans-9Community Member
Alas this still doesnot work.
Given this text: "Bladibla vanillevla end of a line %Some specific character on next line"
let textStr1 = gsap.getProperty(collection[1], "textContent").replaceAll("\uE000", "f");
console.log("t1: "+textStr1);
let textStr2 = textStr1.replaceAll("\uE002", "fi");
console.log("t2: "+textStr2);
The 'fi' in specific still fails..probably because it aint a ligature but just 2 characters...
- Jürgen_Schoene_Community Member
your script
let textStr1 = gsap.getProperty(collection[1], "textContent").replaceAll("\uE000", "f");
console.log("t1: "+textStr1);
let textStr2 = textStr1.replaceAll("\uE002", "fi");
console.log("t2: "+textStr2);is working for me
here is the complete script for multiple replace (for Open Sans, Calibri)
var player = GetPlayer();
let someStr = gsap.getProperty(collection[1], "textContent");
someStr = someStr.replaceAll("\uE000", "f");
someStr = someStr.replaceAll("\uE001", "ff");
someStr = someStr.replaceAll("\uE002", "fi");
someStr = someStr.replaceAll("\uE003", "fl");
someStr = someStr.replaceAll("\uE004", "ffi");
someStr = someStr.replaceAll("\uE005", "ffl");
player.SetVar("debugStr", someStr);
console.log("text[1]: "+ someStr);Important: for Lato is another decoding (no ff, ffi, ffl)
var player = GetPlayer();
let someStr = gsap.getProperty(collection[1], "textContent");
someStr = someStr.replaceAll("\uE000", "f");
someStr = someStr.replaceAll("\uE001", "fi");
someStr = someStr.replaceAll("\uE002", "fl");
player.SetVar("debugStr", someStr);
console.log("text[1]: "+ someStr);decoding is not necessary for these fonts (but it does not interfere)
- Articulate
- Consolas
- Arial
storyline simply appends all available ligatures one after the other and numbers them
=> it must be tested individually for each font/variation - e.g. Futura Bold has 19 ligatures, but Futura Medium only 2
- MathNotermans-9Community Member
nice and complete explanation Jurgen...let me quickly check the font i used.
used Open Sans, so it should work as shown. Will doublecheck and fix later.- PhilMayorSuper Hero
Even better I have to use it in a mock-up of a terminal window and Cascadia Mini has no ligatures.
Sent from my iPhone
- Jürgen_Schoene_Community Member
interesting news - the coding depends on which characters really used in the text of the complete course (with the same font)
tests are made with Firefox - therefore the "good" view of non-printable characters
decoding
txt = txt.replaceAll("\uE000", "f");
txt = txt.replaceAll("\uE001", "ff");
txt = txt.replaceAll("\uE002", "fi");
txt = txt.replaceAll("\uE003", "fl");
txt = txt.replaceAll("\uE004", "ffi");
txt = txt.replaceAll("\uE005", "ffl");Example 1: in the course is used "f – ff – fi – fl - ffi – ffl (Stoffflasche)"
Example 2: in the course is used "f – ff – fl - ffi – ffl (Stoffflasche)" <- no "fi" used (same decoding)
=> decode of "fl", "ffi", ffl" has different results!
=> don't use fonts with legatures, if you want to grab the vector text !
=> you can use e.g. font "Articulate" (no ligature at all) for the vector text
- PhilMayorSuper Hero
Or you could add all the ligatures in an offstage text box in the first slide which would/should make it predictable.
- PhilMayorSuper Hero
Just read it properly I think I will use Articulate font which would work for this.
Sent from my iPhone
- MathNotermans-9Community Member
Your ligature test.story is very helpfull...as it makes it easy to check whether any given font has issues with them in Storyline.
- TylerPerrasCommunity Member
Thanks @Math Notermans for sharing your examples using Storylines included GSAP library. This can be very useful for building our more interactive animations!
I've used GSAP to develop Flash objects in the past, and I'm excited to see that it is possible (though not officially supported) to use GSAP with Storyline.
While playing around with your first example (BuiltIn-TweenLite.story) I noticed that the location of the 'Judge-hammer.png' image moves around if you re-size your browser window after interacting with the activity.
I am building something that uses several animations on a slide and didn't want them to move around on the stage if the user suddenly decides to resize the browser window. I decided to built off of your example and target the 'transform' CSS rules for the hammer image (TweenLite.to actually changes the matrix of an item instead of the existing transform properties) so that they remain in line with their original location on the slide. I did have to add quite a bit of JavaScript to accomplish this, making it more complex than I originally wanted it to be, but it works fine for my purpose so I thought I would share.
I changed quite a few things, and added a few more triggers, so it might be too complex to easily reverse engineer, but it might act as an example of what can be done with JavaScript and TweenLite. For anybody reading this, my example uses specific ID's and Class names that exist in the current version of Storyline, but may not in the future. If this changes, then the file I'm sharing today would no longer work.
A more simple solution for using TweenLite in Storyline might be to just use the classic player as @Math Notermans did in his second example (Multipoint-Animation-TweenLite.story) so that you don't have to worry about device or browser window size affecting how the GSAP TweenLite animations behave. The classic player size is not responsive, so things stay inline in proportion to where they started.
- MathNotermans-9Community Member
Nice T.P, will check this out tomorrow. This post on Gsap and TweenLite somewhat polder anyway, if you check some newer posts from me jou find solutions with TweenLite that maintain perfect position. Found quite some differences in the Modern player vs the Classic player and know how to handle that. Gladly share knowledge and tips and trucks on Gsap , Storyline and animation. Even managed to Morph svg shapes inside Storyline with MorphSvg
- MathNotermans-9Community Member
Here one later sample T.P in which i have a check to see whether the Classic or Modern player is used on based on that uses a calculation that gets the proper x position. Your method of using onUpdate and CSS Transform and the idea of giving an element ( or elements ) a specific ID at start i do like. Especially the idea of giving the element a specific ID i find usefull, cause that i often find cumbersome when working with JS in Storyline.
I do have a function that gets all elements in a scene in Storyline.. might be good to add this to it, so at start everything has a proper ID.As said i got a setup working now that checks whether you publish in Classic Player or Modern Player mode. Based on that getting the x/y position is somewhat different for the player.
Check that here...
Modern Player version
https://360.articulate.com/review/content/3ec783f4-cb1e-4843-9aeb-a98abf1b1684/reviewClassic Player version
https://360.articulate.com/review/content/adedaa1a-ce3f-4b87-9092-e4aeeb597c01/review
Clicking the 'move to spots' button triggers a animation that moves the candy to the endposition of the 3 spots. You can drag the green spots around to change the positions. When clicking the button the candy moves to the correct spot and the variables are updated.The biggest issue, especially because the Classic and Modern player behave somewhat differently, was the x/y translation of the player ( Storyline slide ) on a webpage of a given size.
Figured that out and now on any device ( testing needed for that ;-) the x/y position of elements should be good. To get and set for animation.
- TylerPerrasCommunity Member
Hey Math, sorry for the late response. I saw your reply as soon as you made it but was too busy to dig into it until today. Thank you so much for sharing this! The .story file you shared is very useful. I will definitely be referencing it in future projects. The example you made is great. I've checked your other posts and see a variety of very interesting examples you put together. Also, thanks for letting us know that GSAP 3.5.1 is now the default in Storyline 360. This is great news!
The one issue this example doesn't seem to solve is the browser resize issue. If a GSAP animation finishes, and the browser is later resized, The animated object will no longer start at its original location on the slide. In the example you posted with the stick of candy (obj01.png). If you resize the browser, the stick of candy no longer starts from either its original location, or its last position in the animation. For some reason, GSAP seems to automatically animate off of it's previous
translateX()
andtranslateY()
values to perform animations instead of the new values that Storyline assigns to it when the browser is resized. At least thats what it looks like to me. This is why I used theonUpdate:
andtranslate3d(" +
method on the example that I had posted in my previous comment. It seems to fix this so that the item always animates from the correct position in relation to where it should be the slide, even after a browser resize.If the starting location of the animated object doesn't matter much, as in your example then it's fine to use the default
gsap.to
function without usingonUpdate:
. In my case I'm creating an animation where distance and location need to be exact as it is demonstrating a measurement. I don't want it to display incorrectly in the case of a browser resize.After typing this out, it occurs to be that I there are probably other ways to accomplishing this, such as placing both beginning and end shapes inside of Storyline, then using
gsap.set
place an item to its start position andgsap.to
to animate it to it's end position. I think that's what I'll try next and see if that holds up after a browser resize.Once again I just wanted to thank you for your responses and for sharing with the community! It is definitely appreciated.
- MathNotermans-9Community Member
Actually that indeed the best approach. Using it all the time now too. Esp. for my multiuser games... 1 instances of Storyline, multiple user with different screens... only solution. Lets connect somehow and make amazing stuff 😉