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
Luke Heathershaw

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

This discussion is closed. You can start a new discussion or contact Articulate Support.