Animating an object - Growing/shrinking
Sep 12, 2016
Hi everyone,
I just wanted to ask if anyone has any ideas on how to animate an object so that it grows or shrinks (ideally a certain percentage) after pressing a button.
So for example, object A is 30px high and wide, the learner presses a "grow" button and the object grows in size by 10px, so it's now 40px high and wide. The learner can then press the "grow" or "shrink" buttons to take it to 50px or back to 30px.
It can easily be done using states with no animation, but I'd really like for it to look like it's growing/shrinking using animations if possible.
I'd imagine it can be done using JS/CSS, but if anyone has any ideas then please let me know.
Thanks,
Luke
10 Replies
Hey Luke! Thanks for posing your question. This discussion might start you off with ideas to avoid animations. And here's a grow AND move example.
Hi Crystal,
Thanks for your help but those links weren't quite what I was looking for. I have just thought of an alternative that will work for me though!
Luke
Oh, glad to hear you were able to find a way. Feel free to let us know what you did in case anyone else comes across this discussion. ;) Thanks!
Ha sorry, that would've been helpful!
I found that I could use different layers to have the object appear as if it's growing or shrinking using the grow and shrink entrance and exit animations. The animations overlay the object on the stage and when the animation completes, using a variable, it triggers a state change on the stage object. This makes it look like the object has grown or shrunk, depending on what the learner chose.
Hopefully I've not made that sound too confusing, I'll try to knock up an example when I get 5 minutes.
Luke
Here's what worked for me.
Obviously it has its limitations, but it does exactly what I needed it to do.
Very creative solution, Luke- Looks great! Thanks a bunch for sharing here :)
Awesome, Luke! Way to pay it forward.
hi Luke, If you want to ever move the circle easily without all the layer adjustments , you can do the same thing with entrance and exit animations(grow entrance on scale up)(shrink exit on scale down) placed on Objects in different states. Each state object would be successively larger. Glad you worked it out!
Thanks for popping in to share that tip, Richard!
Hi Richard,
Good shout, I didn't think of that. That'll make it much easier to edit or add new sizes.
Thanks!
This discussion is closed. You can start a new discussion or contact Articulate Support.