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
63 Replies
@Math thank you so much for this I have it working how I want now really appreciate this.
@Jurgen thanks for this I noticed the oddities yesterday, thank you.
@Math I also want to say a big thank you for all of the annotations and additional slides, over and above what I was hoping for, thanks :-)
I have your code working for the SplitText - just wondering if there is a way to add in a break in the text, it would be awesome to control where the hard returns are. See file for example
Did check whether in some way you could use <BR> in the text but that didnot work.
However you can detect a specific character and add a br-element in the code when creating the HTML-text.
Showing here...
https://360.articulate.com/review/content/068eab8b-a19e-4852-96a2-5dca03bf9886/review
@Jurgen as you can see 'fi' has issues :-)
So how to do this ?
Split the text into an array.//creating a textArray and splitting on %const textArr = textStr1.split("%");
Then create a linebreak.//creating a linebreakconst br = document.createElement("br");
Finally loop through your array and add an arrayentry ( so a line ) and then add a linebreak.for(var j = 0; j < textArr.length;j++){textNode = document.createTextNode(textArr[j]);h1.appendChild(textNode);h1.appendChild(br);}
Working sample shared.
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
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...
Thanks Jurgen
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
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.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
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
Or you could add all the ligatures in an offstage text box in the first slide which would/should make it predictable.
Just read it properly I think I will use Articulate font which would work for this.
Sent from my iPhone
Your ligature test.story is very helpfull...as it makes it easy to check whether any given font has issues with them in Storyline.
For the SplitText and similar setups..i do think using a non-ligature Articulate font version for the original text field probably is the easiest solution. Good to keep in mind. Whenever you create HTML text with that content...it doesnot matter anyway as its no real Storyline text anymore.
Math, I was wondering if I can ask to borrow your coding genius mind to help me figure out the screen size refresh code for this slide. It functions like I want on a desktop monitor, but when reduced down the scrolling panel percentages don't work correctly. Here is the example -
https://360.articulate.com/review/content/ce7573c7-fc10-42c8-961e-c0fd17576556/review
My first thought was that it was a Review issue, but testing and publishing purely as Web has the same results. Checking things out now.
Tweenlite you can exchange for gsap as thats included in Storyline now.
As you use a 'FromTo' tween for the scrollArea... easiest is using some static elements and then getProperty to get the exact values to move From and To... making that work in your sample.
