Principles · The craft behind motion
Squash & stretch挤压与拉伸
- cartoonish
- elastic
- exaggerated
Squashing and stretching the element as it moves, imitating how a springy object deforms when landing and taking off.
When to use it
Use it on illustrations, mascots and playful elements; icons and text lose legibility when squashed, so be careful.
Parameters
on landing scale(1.1, 0.9) · on takeoff scale(0.95, 1.05) · each 120ms ease-out
Recipe
each 120ms ease-outSquash & stretch → on landing scale(1.1, 0.9) · on takeoff scale(0.95, 1.05)
One sentence for your AI
Add squash and stretch to this mascot: scale(1.1, 0.9) on landing and scale(0.95, 1.05) on takeoff, 120ms ease-out each, then back to 1.