Josh Comeau • 4/13/2026

Squash and Stretch

This article explores how to apply Disney's 'squash and stretch' animation principle from the 12 Basic Principles of Animation to web development, specifically for SVG icons. It demonstrates the concept with a bouncing ball example and then focuses on creating stretchy arrow icons for hover interactions. The tutorial includes code snippets for implementing the effect using SVG paths, showing how to modify drawing instructions to achieve a visually pleasing stretch animation. It emphasizes subtle micro-interactions that enhance user experience on websites.

0 comments

#Frontend #ui animation #css animations