Forum Discussion
Animating the size of an object
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
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.
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.
