Storyline360, Animation and GSAP ( Greensock )

Hey Math

Got lost on this

 var player = GetPlayer();
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"));
}

console.log("someText: "+ someNewStr);

That gives me all of the text in the course in the console, how do I get the text in just one shape?

I am missing something big I am sure.

2 Phil Mayors here? Which one is the real one ;-) Or is one Phil Minor ;-)

Basically its all in the code as is.

Here i set a variable.
player.SetVar("debugStr",someNewStr);
So if you add an inline variable anywhere in your project...it will show the text.

But if you want a single value from a given element in your project...
Use this...

var player = GetPlayer();

// collection will be a collection of ALL elements with text
const collection = document.getElementsByClassName("vector-text-item");

/*
Depending of the amount of your texts you need a specific one.
Storyline will count up from 0 till the top layer on top.
So depending on your Storyline this number will differ.
0 is the lowest layer.
collection[0] or collection[7] or whatever layer you need.
*/

var someStr = gsap.getProperty(collection[0], "textContent");
player.SetVar("debugStr",someStr);
console.log("someText: "+ someStr);

So this is the solution you want ;-)
https://360.articulate.com/review/content/07c6804a-d8cd-4d8a-add0-a8535d3bcd24/review

If you can add a acc-name to the textfields you want the text from... then this is the code to use.
var player = GetPlayer();
var myElement = document.querySelector("[data-acc-text='selectMe']");
var someStr = gsap.getProperty(myElement, "textContent");
player.SetVar("debugStr",someStr);
console.log("correct textfield is: "+someStr);

If however you cannot add an acc-name to that particular textfield... go for the solution on the last slide...'eightSlide'. I add a textfield with the text 'dummy' in it ( you can make it invisible ) and in the code check for that. Like this...
var player = GetPlayer();
const collection = document.getElementsByClassName("vector-text-item");


for(var i = 0; i < collection.length;i++){
    var someStr = gsap.getProperty(collection[i], "textContent");

    if(someStr=="dummy"){
console.log("textfield above the one we need is: "+i+" and text is "+someStr);
var layerNum = i-1;
    var correctStr = gsap.getProperty(collection[layerNum], "textContent");
            console.log("text is: "+correctStr);
    } else{
    }
} 

For your ease added the .story

@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

Thanks Jurgen

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.