Forum Discussion
GSAP 3.5.1 ( latest version ) is now included in Storyline 360
A few months ago i discovered Storyline uses the GSAP Tweening library for all its animation features. Any animation you make in Storyline somehow is triggered by GSAP under the hood of Storyline. T...
Thanks Math for the information on GSAP. I couldn't help but notice that on the GreenSock site, these GSAP calls first parameters are CSS pseudo-classes, but here in Storyline the first parameter are IDs. Why do you suppose the implementation is different here— or am I missing something? Thanks!
Thats due to the fact that when you add elements into Storyline...you donot know what ID it might have...and Storyline uses some weird obsfuscating ( if thats the correct word ;-) ) principles that make the final image have a totally unlogical ID and name. So the easiest way to select an image you add in the Storyline-editor is using the 'acc-name'. In fact there are several other ways to get any element in Storyline. I made functions in my reusable code that gets ALL elements on screen in Storyline and puts them in arrays for text, images, video etc. etc. Also the order in the timeline ( from top to bottom ) is also a way of selecting them.. but as said without going to deep into detail...the 'acc-names' are the easiest way.
Yes, I see that the JavaScript returns a NodeList when we use "data-acc-name". For a single match the Nodeline has one index, and you can access the value without having to use index syntax. I've found that the only ID (lane name, not layer name) that Storyline reports correctly for GSAP purposes is when you import a graphic with a contiguous name (no spaces) , and with no special characters. For all other Storyline objects - text, shapes, etc. - Storyline creates an internal lane name (with spaces) & we have to go through & explicitly set IDs like how you outlined, by iteravely stepping through the NodeList & setting IDs.
I wonder if it would make sense to do (as much as possible) a wildcard search for all objects on a slide, then iteratively set all IDS with values like Object01, Object02... the thing is that's not a very good descriptive way of settings IDs.
Perhaps if there was a way to pull in the "IDs" that get assigned to objects by Storyline - the ones with spaces in their values - and use JavaScript to pull these substrings out. That way, the intent of how Storyline set these values would still make sense (for example, "Star 1" could become "Star1", and thereby become a legal, useful ID). It doesn't look like Storyline assigns any ID at all to these objects. I don't know what the lane name is used for, but it must be a non-accessible value used only in the Storyline interface.
Storyline uses React as a framework; I noticed that the term "data-reactid" is embedded all the way through the SVG-rendered "Star 1" innerHTML I was playing with. The generated "data-reactid" value is totally obfuscated though- I was hoping there might be a key to that value that could be used to de-obfuscated & render the "Star 1" name, but if there is one, I didn't see it. Ah well.
Might help you a bit this. I added my function to get All elements in Storyline to this one.
https://360.articulate.com/review/content/a8862298-c693-4955-98f8-3f452fc73e17/review
Will add the Storyline itself here too.
What does it ?
Onscreen there are images, shapes, texts and some buttons setup. Some basic Storyline elements. When you click 'GetElements' my function that gets all elements onscreen in Storyline gets executed and shows them in the debugData window. All elements get checked and passed into appropriate arrays from which you can work with them. The red shape ( accname= 'END' ) stops the processing of the elements. All on top of it in the timeline get ignored.
I have this script in my 'generic_functions.js' so i can call it any time.
Added that the data-model-id of elements is captured too ( of shapes at least ) and in this variable..let elId =el.getAttribute('data-model-id');
And for images the real id of the element gets captured too.el.getElementsByTagName('image')[0].getAttribute('id');
This way you could change the ids for real helpfull ids...or as you know them now, use them in your coding.
Kind regards,
Math
