Animating the size of an object

Hi Math, yes I was looking through your posts and saw the one with the random wheel spin. But that one moves the objects - I don't think it sizes them. I didn't see one for sizing but I'll try the code below. I'm not too familiar with javascript so let's see how I do. Thanks!

wowzers it worked. Thanks!! Any way to specify the anchor point? Such as, I want it to grow from the top left corner.

Great work DR.

Let me clarify some of the code and give some tips.
Foremost...do use the GSAP site for any tips about GSAP code.
https://greensock.com/get-started/

To detect what version of GSAP is used in Storyline you can run this line of code.
console.log("GSAP: "+gsap.version);
In the browser console it will tell you that GSAP is in version 3.10.4

One of the things you notice is i use gsap instead of TweenLite. From version 3 upwards all GSAP code is written as gsap.to etc. instead of TweenLite.to

When coding for Storyline your process falls into 2 parts.

1) Selecting the proper elements on Storyline stage
2) Doing something with these elements

Your selector selects ALL elements that are named 'PatientOverview_2.png'. In your case that is only 1 probably, but you should be aware that you get a HTMLCollection back and not just 1 element. Well in your case its just 1 element, but you can have more. So when you only want 1 element use document.querySelector("[data-acc-text='PatientOverview_2.png']"); instead.

Do be aware that this now only works because Storyline automatically assigns the element this 'accessibility-name'. It might be needed to specifically set acc-names on elements in some cases.

var movepic = document.querySelector("[data-acc-text='PatientOverview_2.png']");

So now we have 1 element selected.

The gsap code to tween this properly would be like this:
gsap.to( movepic ,  { duration:0.75, scale:1.38});

autoAlpha:1 = shows an image at 100%
autoAlpha:0 = fades out an image to 0%
autoAlpha:0.5 = image fades in or out to 50%

As you can see for version 3 and up.. duration is between the { }

For example you can set your element invisible at start.
gsap.set( movepic , {autoAlpha:0, scale:0.65});
So here we have no duration. gsap.set immediately acts, whereas .to has a duration.

Now on a click or after a specific time you can show and scaleup your image like this.
gsap.to( movepic ,  { duration:0.75, autoAlpha:1, scale:1.38 });

If you prefer to first fadein your image and then scale it... you can sequence gsap events.

gsap.to( movepic ,  { duration:0.75, autoAlpha:1, onComplete:scaleMe });

function scaleMe(){
      gsap.to( movepic ,  { duration:0.75, scale:1.38 });
}

Now the element first fades in, and then scales up. This is easier to be achieved with gsap timelines, but thats for a next lesson :-)

Hello Math, I tried moving a web object using its acc name and the java does not move it. Is it not possible to move web objects like we do with other objects?