Animating an object - Growing/shrinking

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

Richard Hill

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!