Storyline360, Animation and GSAP ( Greensock )

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.

Thanks Math there are two of me, the other one is the real one this is my other account for a specific company.

I was definitely missing something.

I need lots of these slides that are copies of one another with different text in, do the layers stay the same in each slide or do I need to find the correct layer on a slide by slide basis?

Sent from Outlook for iOS
This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Shire Park, Kestrel Way, Welwyn Garden City, AL7 1GA VAT Registration Number: GB 220 4302 31

Thanks Jurgen for this addition as it puzzled me ;-)

@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 ?