Storyline360, Animation and GSAP ( Greensock )

yeah... I am having a hard time locating the source of the element...the alternative way I am thinking to destroy the current image and add a new image on the placeholder of the destroyed image. I wanted to dynamically change the images so it can save a lot of time when creating a course without copy and paste all the images over to a similar course. 

Thank you very much for the help! Math! I was able to change a single image for now with only the first slide. Going on a tough road is painful, but it is one of the best ways to learn. In this era, everyone wants more automation in the work to make it easier to implement. Nothing feels better to get the code working. Again thank you for your guidance and it really helps me a lot. 

First of all, its for sure not GS code thats unreliable as its one the best engines there is and they are very helpfull on their own forum. Its probably due to either mistakes in your own code or due to Storyline's own way of interpreting it.

The resizing browser issue is due to the Modern Storyline player that scales up everything. You can fix that by calculating positions and animations. Quite some approaches for that allover the forum. The Classic player doesnot have that issue.

Do share a sample, as finding errors without it is just guessing.
One guess is the use of querySelectorAll when in fact selecting just a single element. querySelector is better in that case. Another one is using a 'bounce' ease when you use gsap.set... any ease needs time to execute properly. So gsap.to is better in this case.

Kind regards,
Math

SplitText only works for normal DOM text, not for SVG text <tspan> (which is used by storyline for text)

https://greensock.com/forums/topic/12165-splittext-with-svg-text-element-problems/

(Posted August 6, 2015 - I do not believe that anything has changed)

As a reply on how to use DOM related plugins like GSAP's SplitText and ScrambleText on SVG text in Storyline i made a sample.

https://360.articulate.com/review/content/670bb432-b866-436b-8c1b-1b37d824dd0c/review

I use the lines of code as shown to Phil to grab the texts from all textfields in Storyline ( including buttons )...Determine which one i want to use ( in this case that is i1 ) Then i add a pure HTML text field to Storyline by appending it to a shape onscreen. And that textfield i can then target with GSAPs SplitText or ScrambleText.

Some weirdness with the missing i in textfield. Not sure where that comes from... but this is basically the setup you need to get this working.

my assumption

• SplitText tries to read the text from the DOM -> nothing found, all text is in <tspan>

• ScrampleText creates with Javascript the text as DOM text and then animated it

To help you get started....

This is my function that does the work.

function docLoaded_inSL(){

const collection = document.getElementsByClassName("vector-text-item");
const textsArray = [];
let baseStr;

for(var i = 0; i < collection.length;i++){
var sStr = player.GetVar("debugStr");
var someStr = gsap.getProperty(collection[i], "textContent");
var someNewStr = sStr+"<BR>"+"i "+i+": "+someStr;
player.SetVar("debugStr",someNewStr);
textsArray.push(gsap.getProperty(collection[i], "textContent"));
}

const h1 = document.createElement("H1");
const textNode = document.createTextNode(gsap.getProperty(collection[1], "textContent"));
h1.appendChild(textNode);
document.querySelector("[data-acc-text='canvasShape']").appendChild(h1);

var tl = gsap.timeline(),
mySplitText = new SplitText("H1", { type: "words,chars" }),
chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set("H1", { perspective: 400 });

tl.from(chars, {
duration: 0.8,
opacity: 0,
scale: 0,
y: 80,
rotationX: 180,
transformOrigin: "0% 50% -50",
ease: "back",
stagger: 0.01
});

}

Basically it gets all texts from Storyline, and then i use one of them to create a HTML textfield to be targeted by SplitText.

Offcourse you can simplify it.

For example by creating a function to create HTML Text elements.

function createHTMLText(_string,_targetAccName,_elName){

const h1 = document.createElement(_elName);
const textNode = document.createTextNode(_string);
h1.appendChild(textNode);
document.querySelector("[data-acc-text='"+_targetAccName+"']").appendChild(h1);

}

You can then call that like this...

createHTMLText(gsap.getProperty(collection[1], "textContent"),"canvasShape","H1");

or if you donot want to use an existing Storyline textfield, just like this...

createHTMLText("Text to be animated by SplitText","myShape","H1");

And the SplitText functionality you also can put in a function.

function createSplitTextAni(_elName){

var tl = gsap.timeline(),
mySplitText = new SplitText(_elName, { type: "words,chars" }),
chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set(_elName, { perspective: 400 });

tl.from(chars, {
duration: 0.8,
opacity: 0,
scale: 0,
y: 80,
rotationX: 180,
transformOrigin: "0% 50% -50",
ease: "back",
stagger: 0.01
});

}

So now this cleaned up code will work.

let mySplitString = "Bladibla vanillevla and some more text to test this";
createHTMLText(mySplitString,"accNameOfSomeShape","H1");
createSplitTextAni("H1");

function createHTMLText(_string,_targetAccName,_elName){

const newElement = document.createElement(_elName);
const textNode = document.createTextNode(_string);
newElement.appendChild(textNode);
document.querySelector("[data-acc-text='"+_targetAccName+"']").appendChild(newElement);

}

function createSplitTextAni(_elName){

var tl = gsap.timeline(),
mySplitText = new SplitText(_elName, { type: "words, chars" }),
chars = mySplitText.chars; //an array of all the divs that wrap each character

gsap.set(_elName, { perspective: 400 });

tl.from(chars, {
duration: 0.8,
opacity: 0,
scale: 0,
y: 80,
rotationX: 180,
transformOrigin: "0% 50% -50",
ease: "back",
stagger: 0.01
});

}

A few things to watch though. As i use H1 for texts... that is deliberately. You do need to format your HTML text somewhat, if you donot, you probably will not see a SplitText animation. Ofcourse you can format it any way you want, but it has to have some formatting before running SplitText on it.

Hope this helps.