Storyline360, Animation and GSAP ( Greensock )

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.