Animation: Squash, Stretch and Smear

Very interesting challenge. Also using a rectangle instead of a vector shape and using the width, height and border radius instead of the scale. If anybody has time … try this out and post your results here. It's fun but also I found some quirks in Hype when combining motion path and width and height animations. I ended up using a group so the ball origin and ball motion didn't interfere with each other.

My Quick take on it… needs refinement: (20,6 KB)

Show me what you got…
But you can also use a vector shape…


Here is a version with a symbol instance and the motion path is applied from the main timeline (one could even remove that group now actually)… little less flexible but when creating multiple timelines and reusable squishes in the symbol as timeline one could control them from the main stage. (35,4 KB)


Oh nice - it would be pretty cool to have a library of techniques around the 12 principles of animation (at least those not "out of the box" like the timing functions).

From watching the video, I'm not sure why the guy was so opposed to using a scale property when he mentioned the solution of changing the anchor point (aka "transform origin"), but adjusting the border radius is a good tip too anyhow to give flatness to the bottom. Note that one can change the border selector so that only the border radius for the bottom corners are affected:

(Unfortunately Hype doesn't support setting the x/y curvature independently of the CSS border radius (ala border-bottom-right-radius: 100px 200px;) which would probably be the most ideal way to do this animation if you don't want to do the vector shape work)

1 Like