Animating the size of an object

Jul 14, 2022

I've gone through the threads and read some super old 9y posts but there are no real solutions to simply animate the size of an object.

I've looked into the method of duplicating the object and then adding a Grow along with a Motion Path but it's pretty inferior. The problem is that Grow starts from a real tiny size. I want it to start from the size I indicate.

I have a picture that is 5 inches across, I want it to grow to say, 8 inches and appear like a zoom effect. I think there's a way to do this with Javascript. Anyone have success with this?

Also, Articulate, people have had this need for 9 years. I just sent a feature request suggesting it be included in the Motion Path function. You'd simply select the second dot (red) and you'd get the size/rotation handles. Adjust that and voila! just like that it grows and rotates as it moves. If you only want it to animate the size/rotation without traveling along the path, there can be a new  path option: "in place". In that case, you only get the red dot (end result) with no path and you can adjust the handles the same way.

24 Replies
D R

Oh heck yeah. Got it using your code from that file. 

https://360.articulate.com/review/content/7b563055-48e9-494c-858d-601f051f1c87/review

The code I modified after two dozen trial and error publishings:

var movepic = document.querySelectorAll("[data-acc-text='PatientOverview_2.png']");
TweenLite.to( movepic , .75, {autoAlpha:1,scale:1.38,x:"+224",y:"+208"});

(the only part I don't get is what autoAlpha does)

Thanks a lot, Math! May your roads be paved with gold, your suppers filled with shellfish! 

Math Notermans

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

Math Notermans

Basically this works. I dont have time now to explain fully how to get the WebObjects selector. Will show that when i got some time.

Here you can see it work.
https://360.articulate.com/review/content/4b0d17a0-6e6c-495f-9c9f-6d60090adab5/review

Including a simple way how to communicate variables from parent to WebObject ( and back if wanted ).

D R

hmm is that web object selector specific to your file? I tried it and cannot get my web object to move. Or maybe the move code is wrong:


var webObject1 = document.querySelector("#slide-window > div > div > div > div > div.slide-layer.base-layer.shown > div.slide-object.slide-object-webobject.shown.cursor-hover");

gsap.set(webObject1, {y:"-365"});

I basically have the web object at the bottom, out of frame so that it preloads, then with the javascript I want it to move to the center so that it's visible. It works great with the motion path animation but the minimum duration is .10 so you can see it move a tiny bit. I'd rather have it just appear in place.

 

Math Notermans

Yes that WebObject is specific to my file. You have to use the inspector to detect yours and use that. Probably with some smart logic you can construct the selector... i probably did in some code somewhere... first gonna show you how to use the inspector to get the specific selector.

And although you can have a WebObject almost out of screen... a small part needs to be inscreen ( doesnot have to have content, so its invisible ) but has to be partly onscreen to be selectable.

Do share your file...

Math Notermans

Aha...you got it the WebObject on a SlideLayer... well that complicates things...

SlideLayers basically are hidden layers inside the HTML. Thats the way Articulate made them... so they are hard to target, because they are hidden ;-) Let me see if i can find a solution, else you might want to get all on that specific SlideLayer in the Base Layer...

And you got the WebObject out of view on the SlideLayer, no way to get it selected this way with Javascript..its hidden from the HTML in 2 ways like that. So im moving it up a bit now, for a test.

Your WebObject as is generates dozens of Javascript errors, both locally and on Review. So im replacing that now by a simple WebObject to test.

One other thing thats causing issues... the timing on cue points. The auto play with audio doesnot work, so the cue point on the Slider Layer is never reached.

When you mix and match Storyline internal stuff like cue points, transitions and SlideLayers .. it is tricky as Javascript as is doesnot know about it.

Math Notermans

Basically it works now....

var webObject1 = document.querySelector("#slide-window > div > div > div.slide-transition-container > div > div:nth-child(7) > div.slide-object.slide-object-webobject.shown.cursor-hover");
gsap.to(webObject1, { duration:1.5, y:"-150",delay:2});

I removed the waits for cue points and added the delay in gsap. Thats works better. Also i changed the gsap.set to a gsap.to... so you get some animation.

I also disabled all audio because audio autoplay will cause issues on some devices and when you use that as your trigger for other events...well all will fail.

The div:nth-child(7) in the selector is the WebObject on the SlideLayer. You will need to check in the Chrome inspector if that name is correct.

D R

thanks so much, Math. I am working on implementing that code into mine...

I see what you're saying about the audio.

So for the intestine animation, yes that's Animate. I actually have it communicating with storyline back and forth. I'm not using the sophisticated way you did above, I'm simply using get var and set var in animate. So, it waits till storyline changes a variable and then it plays the animation which is basically when the voiceover stops talking. Works great! 

So really the only problem I had was that you can see the .10 sec animation as the web object flies in from the bottom. I'd rather have it just appear in place at the speed of light. That's why I tried gsap.set. :) Let me see if I can get the code to work...