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.

I tried that but it diminishes to nothing and I don't see any means to control or halt the motion. 

Thanks, Math.

I'm new to articulate but this seems like a good thing to learn how to do. I haven't used JS in more than a decade, but a quick perusal of the greensock site was encouraging. 

I watched a video on using the greensock method and it seems that there are scalability issues. Do you know anything about that? If I look hard enough on greensock will I find a solution? Seems like setting percentages ought to mitigate this, but I don't know yet. 

Can I assume that if I created a LOTTIE, I would not have scalability issues? 

JK

So, I tried by following a few videos. I'm not sue what I'm doing wrong but maybe you can tell me. This guy, for instance.

https://www.youtube.com/watch?v=Mnvgge8ttpY&t=525shttps://www.youtube.com/watch?v=hRRZ0mbhWoQ&t=357s

No need to watch it. I'll explain the pertinent parts.
He has a ball that he named "basketball" in the accessibility option in the drop down. I did the same but named my object "space". 

In his video he created a trigger on a button, "execute JavaScript". In mine I want it when the timeline starts, so that is what I did.

Below is what he put in his JavaScript with my minor alterations. On GSAP site they don't have spaces after or before the curly bracket, but he did and I tried it both ways. Tried with percentage signs, without percentage signs. I changed various characteristics. Cleared my browser cache. Nada. 


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

gsap.to(theObject, {scale: 0.66%, x: 700, duration: 1.5, ease: "back"})


Any advice or correction would be greatly appreciated. 

Thanks in advance. 

JK

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