Squash and Stretch

The article discusses the "squash and stretch" principle from Disney's 12 Basic Principles of Animation and how it can be applied to web development, specifically for animating SVG icons. The author demonstrates this technique using a stretchy arrow icon that elongates and thins on hover, providing code examples and implementation details using CSS transitions or JavaScript. The post emphasizes that this animation principle creates visually pleasing micro-interactions that enhance user experience on websites.

Have you ever heard of Disney’s 12 Basic Principles of Animation opens in new tab ? It’s a collection of animation best practices created in 1981 by two Disney animators, intended to be used by the folks who produce animated cartoon movies like Aladdin or Beauty And The Beast. Not all of the rules are relevant to us, as web developers, but some of them are incredibly useful. In this blog post, I want to share my favourite rule, and show some of the ways I use it in my projects It’s the very first rule, “squash and stretch”. Let’s start with the most common example, a bouncing ball. Check out what happens as you drag the slider: As you increase the “Squash/Stretch Amount”, the ball starts to flatten like a water balloon when it hits the ground, threatening to burst. As it bounces back up, it elongates, becoming long and skinny. This bouncing ball demo is useful in showcasing the general idea: there’s something visually pleasant about an object getting squashed or stretched during motion. In practice, I find myself using this trick a lot more on SVG icons than with bouncing balls, so that’s what we’ll focus on in this tutorial though I’ll include a full playground for the bouncing ball at the end, for anyone curious . Link to this headingStretchy arrows On this blog, I have lots of little SVG icons that have subtle micro-interactions. For example, on the homepage, I have little arrows that stretch on hover: The arrows aren’t just getting longer; to really sell the effect, the tips of the arrow get pulled in slightly, as though the arrow was getting thinner as it gets longer. Here’s a side-by-side comparison showing this effect with/without the stretch effect. Tap each arrow to trigger the effect:Hover over each arrow to see the difference:Trigger each arrow by focusing and pressing Enter Without Squeeze With Squeeze Isn’t it so much nicer with the squeeze? 😄 Things happen pretty quick in this animation, so here’s another demo that lets you scrub through the full stretch effect: Let’s look at how we can create effects like this Link to this headingImplementing stretchy arrows First, we need an icon to work with. My favourite icon pack these days is Lucide opens in new tab , a fork of the legendary Feather Icons pack, which adds 1000 new icons in the same lovely style. So, let’s grab the arrow-right icon from Lucide, downloading it as an SVG. After reformatting the code and removing unnecessary attributes like xmlns , here’s what we’re left with: <svg width="24" height="24" viewBox="0 0 24 24" <path d=" M 5,12 h 14 " / <path d=" M 12,5 l 7,7 l -7,7 " / </svg In this SVG, we have two <path elements; the first one draws a straight horizontal line the main shaft , while the second draws a shape the arrow tip . To solve this problem, we want to come up with an alternative set of drawing instructions for the hover state. For example, the arrow shaft should grow from a 14px-wide line h 14 to a 17px-wide one h 17 . How do we transition between two SVG paths? Well, that depends on what level of browser support we’re willing to accept 😅. The simplest solution is to use CSS transitions, but unfortunately, transitions on <path elements aren’t supported in Safari. This means that browser support is only around 79% opens in new tab , as of April 2026. Alternatively, we can use a JavaScript library to handle the transition for us. This means that it’ll work consistently for all users, but at the expense of a larger JS bundle and some additional code complexity. Let’s start with the most basic approach. Here’s a stripped-down implementation: Code Playground <style @media prefers-reduced-motion: no-preference { .shaft, .tip { transition: d 300ms; } .btn:hover .shaft, .btn:focus-visible .shaft { d: path "\ M 5,12\ h 17\ " ; } .btn:hover .tip, .btn:focus-visible .tip { d: path "\ M 15,7\ l 7,5\ l -7,5\ " ; } } </style <button class="btn" <svg class="arrow" aria-hidden="true" viewBox="0 0 24 24" <path class="shaft" d=" M 5,12 h 14 " / <path class="tip" d=" M 12,5 l 7,7 l -7,7 " / </svg <span class="visually-hidden" Provide a description here of what this button does, for assistive technologies like screen readers </span </button The CSS path function allows us to specify an override for the d attribute on SVG path elements. When we hover over the button, we apply new drawing instructions for both <path nodes. We can then use CSS transitions to smoothly interpolate between states. I’m using the prefers-reduced-motion media query to make sure that this animation doesn’t trigger for folks with motion sensitivities. For this particular effect, the motion is pretty small/subtle, but there are all sorts of reasons why someone might want to disable motion, so I prefer to err on the side of caution. One gotcha to watch out for: strings in CSS aren’t multi-line. This means when we define our new path override, we either have to keep it all in one line eg. path "M 5,12 h 17" , or use backslashes \ to escape the newline characters. Like I mention in my blog post about paths, I prefer to have each command sit on its own line. In this case, the commands are relatively short, but most SVG paths are considerably longer, and I find that formatting them across multiple lines makes them much easier to read Link to this headingUsing a JavaScript library Like I mentioned earlier, this version won’t work in Safari. That’s not necessarily a deal-breaker; for purely-cosmetic effects like this, I think we can be a little more relaxed when it comes to our browser support targets. That said, I usually do want my micro-interactions to reach as wide an audience as possible So, let’s look at how we can use Motion opens in new tab to implement the same effect: Code Playground import { animate } from 'motion'; import './reset.css'; import './styles.css'; const btn = document.querySelector '.btn' ; const shaft = btn.querySelector '.shaft' ; const tip = btn.querySelector '.tip' ; btn.addEventListener 'pointerenter', event = { if checkPrefersReducedMotion { return; } animate shaft, { d: M 5,12 h 17 , } ; animate tip, { d: M 15,7 l 7,5 l -7,5 , } ; } ; btn.addEventListener 'mouseleave', event = { if checkPrefersReducedMotion { return; } animate shaft, { d: M 5,12 h 14 , } ; animate tip, { d: M 12,5 l 7,7 l -7,7 , } ; } ; function checkPrefersReducedMotion { return window.matchMedia ' prefers-reduced-motion: no-preference ' .matches; } If you’re not familiar with Motion, it’s an absolutely lovely animation library. In a former life, it was a React-exclusive library called Framer Motion, but since then, it’s become a vanilla-JS tool with alternative versions for both React and Vue. The animate function works by manually calculating the intermediate values for every frame in JavaScript. This sounds like it’d be really slow / inefficient, but Motion is well-optimized. It also uses the Web Animations API under the hood, which means we even get the benefit of a separate animation thread So, even if there’s a bunch of other stuff happening in our application, the animation should still run smoothly. Link to this headingAdding some polish ✨ There are a couple more things we can do to make this look even better. First, let’s use spring physics instead of the default Bézier easing: Bézier easing Spring easing Unlike Bézier curves, spring physics are modeled on real-world springs, and the motion they produce tends to feel a lot more natural. Springs work particularly well for squash/stretch effects like this, since it makes the element feel elastic and rubbery. Another thing we can do is to move away from a typical state-based hover transition, and focus instead on the hover event. This is one of my favourite little tricks, and it’s something I cover in-depth in a dedicated blog post. Instead of applying the stretchy-arrow variant based on the hover state, I can instead trigger it for a brief moment when the hover starts: State-based Event-based In the state-based variant, the arrow stays stretched for as long as the cursor remains over the SVG or, on touchscreens, until the user taps somewhere else . But in this new version, the arrow snaps back almost immediately. I like this because it’s playful and unexpected. Almost all hover interactions online are state-based, so it really stands out when we do something different Here’s a new implementation that integrates these bells and whistles, using the Motion library: Code Playground import { animate } from 'motion'; import './reset.css'; import './styles.css'; const btn = document.querySelector '.btn' ; const shaft = btn.querySelector '.shaft' ; const tip = btn.querySelector '.tip' ; const SPRING CONFIG = { type: 'spring', stiffness: 300, damping: 12, }; btn.addEventListener 'pointerenter', event = { if checkPrefersReducedMotion { return; } animate shaft, { d: M 5,12 h 17 , }, SPRING CONFIG ; animate tip, { d: M 15,7 l 7,5 l -7,5 , }, SPRING CONFIG ; // Wait a brief moment, and then revert // to the default arrow shape: window.setTimeout = { animate shaft, { d: M 5,12 h 14 , }, SPRING CONFIG ; animate tip, { d: M 12,5 l 7,7 l -7,7 , }, SPRING CONFIG ; }, 150 ; } ; function checkPrefersReducedMotion { return window.matchMedia ' prefers-reduced-motion: no-preference ' .matches; } Link to this headingGoing deeper The trick we’ve covered in this blog post is just one of the little strategies I use to add polish to my animations and interactions. For the past 18 months, I’ve been focused on creating the ultimate resource when it comes to web animations. It’s called Whimsical Animations, and registration has just opened In this course, I’ll teach you everything I’ve learned about creating top-tier animations and interactions using HTML/CSS, JavaScript, SVG, and 2D Canvas. If you’ve ever wondered how I did something on this blog or one of my other projects, there’s a very good chance we cover it in the course. 😄 In my experience, most front-end developers have a pretty limited set of skills when it comes to animation. It’s not really part of the typical “web developer” toolkit. This is a real shame. We can do so much cool stuff when we get beyond the basics of CSS transitions. Whimsical Animations mostly focuses on implementation, but I also share a bunch of stuff I’ve learned about animation design. This blog post was actually plucked from the “Animation Design” bonus module Most of us don’t have the luxury of working with a motion designer, so I wanted to make sure that this course covered everything you need to start creating incredible effects. ✨ Learn more here: Link to this headingBonus: bouncing ball playground In the very first demo on this blog post, I shared a bouncing ball. Here’s a playground with detailed comments showing how this effect works: Code Playground <style / This keyframe causes an item to bounce into the air. It pauses briefly on the ground 5% of the total duration so that the squash effect doesn’t happen while the element is in the air. If this still doesn’t make sense: picture bouncing a very soft ball. It will splat on the ground for a sec before bouncing back up. / @keyframes bounce { 0% { / I’m using the “translate” shorthand here, rather than “transform: translate ;”, since we’re going to use two different transform functions on the same element. The next keyframe uses “scale ”. / translate: 0 0; } 5% { translate: 0 0; } 100% { translate: 0 -100px; } } / This keyframe handles the squashing and stretching. It begins with the element splatting on the ground, bulging out horizontally. Then, very quickly, it stretches out vertically, before eventually reverting to its natural size. / @keyframes squash { 0% { scale: var --squash-ratio calc 1 / var --stretch-ratio ; } 10% { scale: calc 1 / var --squash-ratio var --stretch-ratio ; } 100% { scale: 1 1; } } .ball { / It’s actually really tough, trying to model gravity using cubic Bézi