Expand and Contract a graphic?

Hi JK,

No problem. Love to help out.
Ok, checking your code and remaking a sample i notice a few things.

First of all querySelectorAll... this selects all elements with a given name and returns a HTMLCollection. So if you have multiple elements named 'space' you need to get one of the collection... theObject[0]. Assuming you only have 1 element named 'space' you better use querySelector as then you only get the targeted element.

The scaling parameter is already in a percentage from 0 to 1. So changing that to 0.66 will do the trick. If you use other values in parameters then use "" around it.

As for positioning elements using 700 in my sample didnot move the element out of view.
Using "100vw" moved it out of the view :-)

About scalability and Lottie... well you run into that too then. As Lottie doesnot know about Storyline's player, and thats exactly what causes the scalability issues. With percentages, some calculations, using vw and vh that can be tackled.

One trick i use a lot to ensure i wont have scalability or positioning issues is adding dummy objects on stage i refer to for getting info about scale and position.
As they will not be changed by JS the Storyline player will act on them normally.

Use getProperty for that..
var myElement = document.querySelector("[data-acc-text='someAccName']");
var elXPos = gsap.getProperty(myElement, "x" );
var elYPos = gsap.getProperty(myElement, "y" );
var elWidth = gsap.getProperty(myElement, "width" );
var elHeight = gsap.getProperty(myElement, "height" );

console.log("x: "+elXPos+" | y: "+elYPos);