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
Easy peasy with SL360. Do check my posts about GSAP. Gsap is the best javascript tweening library around. And its Standard built into SL360.
Some dummy code that should get you started
var myEl = document.querySelector("[data-acc-text='some.png']");
gsap.to(myEl,{duration:2,scale:2});
As i made this code on my phone it might have typos
Hey Doland! It looks like Math is helping you with the javascript (Thanks Math!). I just wanted to say I think that would be a really nice feature, too! Thanks for submitting a feature request! I would love that option! 🤞
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.
I tried adding a Motion path that moves the image down/right at the same cue point as the java but it didn't work. It does the enlarging first (from the center) and then it resets in size and just moves the original small size down/right.
oh I see that your random wheel file actually does have a sizing-while-moving function on the first page. I've downloaded the story file and trying to figure out the code...
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!
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 :-)
And when you want the transformation origin point somewhere else...
sample of this...
https://360.articulate.com/review/content/8b6932db-b253-4e60-b0df-e7569a2cf0ea/review
Nice! thanks for the writeup, very easy to understand. I bookmarked and saved this page. and that demo is great!
I edited the code and it works perfectly:
https://360.articulate.com/review/content/7b563055-48e9-494c-858d-601f051f1c87/review
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?
Yes it is, but you have to dive into your console to get the proper element. Making a sample.... and showing how to use the console to figure out the selector of more difficult elements like WebObjects
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 ).
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:
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.
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...
ok here's the slide I'm working on. When you say inspector, are you referring to the Chrome inspector?
Yes...
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.
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.
so the Intestine animation with the truck in the WebObject ? It is a Adobe Animate animation i guess. What should it do ? Because running the index solo...doesnot animate either ... and in Storyline it gives a lot of errors.
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...
Yes... gsap.set should work for that case. Use console.log() to check its called at the appropriate time and it should work.