Expand and Contract a graphic?

You could try a Shrink Exit animation with the "To Right" effect option.

Or use GSAP...with GSAP you could even make a LOTTIE animation in AfterEffects and trigger that with code in Storyline.

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);

Thanks!
It still does not work though. 

Here is what I put in the JavaScript Editor:

var theObject = document.querySelector("[data-acc-text='space']");

gsap.to(theObject {scale: 0.66, x: 100vw, duration: 1.5, ease: "back"});


Attached is the screenshot of the error that Chrome gives me. I have no idea what this means! LOL. I just know that absolutely nothing happens 

I have no idea where this ) should go. 

Do you suppose I should figure out a trigger that is not, "when timeline starts"? 

This is a lot of work for one little aesthetic but I want to learn how to do this type of thing with JavaScript in Articulate. 

Off to work. 

Appreciate your help!

JK

The console is your best friend ( next to me ofcourse ;-) )..  You can click the error in red and it will show the line your typo is in. Do share a .storyline... makes it way easier to debug.
If clicking the error doesnot show the user.js with the line giving the error... open up the tab 'Application' in the helpers window... then you can select/open user.js and find the line giving the error.

Syntax is really important in Javascript. 1 comma or bracket too much and it will fail.
Do check my sample to find the differences.

What i see in your typed code..it might just be this: x: 100vw that should be x: "100vw"
And noticing a comma missing after theObject..

So instead of:
gsap.to(theObject {scale: 0.66, x: 100vw, duration: 1.5, ease: "back"});
this:
gsap.to(theObject, {scale: 0.66, x: "100vw", duration: 1.5, ease: "back"});

Try to understand the syntax.

Borrowed from the GSAP site.
A method can be to...from...fromTo, set or many more..
the target(s) are your element(s) you want animated..
Do notice the comma and brackets. They really are necessary.

Thanks Matt!
I have been traveling and away from my computer. 

But that little comma did the trick. It went too fast though. And too far, but I think I can tweak this. 

Maybe I'll make a cue point that start from there. 

JK