Reverse animation - not going all the way

I am trying to create an animation (attached) of a rectangle that starts from 0 width at the center of the page (therefore invisible) and then spreads to the full width and length, covering the whole page (stretching out from the center). I have done this in main timeline. Then I am trying to close the rectangle through a button so that it ulimately disappears … however when I play the reverse timeline, the rectangle does not close all the way and remains “open” with a width of about 100 px…?

Am I doing something wrong?


Reverse timeline (13.6 KB)

Possibly this Demo will do the job for You: Reverse timeline animation.hype (13.8 KB)

I made three changes - the critical one first…

• Unpinned all the sides of the rectangle.
• Removed the border of the rectangle so it is truly invisible.
• Centered the button by pinning the left/right sides - thought the effect was better.


Thanks Jim!

I think you might have sent me my version again by mistake.

However, I made the changes you suggested and they work beautifully – except the last. How did you pin the left / right sides for centering?


Sorry about that!

Here is the “real” doc: Reverse timeline animation (12.7 KB)

Here is a screen shot of the button set-up…




Thank you!

1 Like