The Art of the Squish: Making Animations Feel Tactile

In the world of animation, few principles are as fundamental or as satisfying as "squash and stretch." It's the secret sauce that turns a rigid, lifeless object into something that feels organic, responsive, and, well, alive. At Molda, this isn't just a technique; it's the core of our "digital clay" philosophy.

What is Squash and Stretch?

Originally one of the 12 basic principles of animation defined by Disney's old masters, squash and stretch refers to the idea that animated objects get shorter and fatter (squash) or longer and thinner (stretch) to show speed, momentum, weight, and mass. Think of a bouncing ball: it squashes as it hits the ground and stretches just before and after impact.

The most important thing is that an object's volume does not change when it squashes or stretches. If a ball gets wider, it must also get shorter to maintain its mass.

"Animation is not the art of drawings that move, but the art of movements that are drawn."

Applying it to 3D "Clay"

In 3D, we can apply this principle to everything from a character's jump to a simple button click. When a user hovers over one of our "clay" buttons, it doesn't just change color; it subtly squashes, as if being pressed by a finger. This micro-interaction provides powerful, tactile feedback that makes the digital experience feel more physical and satisfying.

Key Takeaways:

• Exaggeration is key to conveying emotion.
• Maintain constant volume to ensure realism.
• Apply these principles even to the smallest UI interactions.

It's crucial to remember that these principles are not just for character animation. They apply to everything that moves on the screen. For example, a button can have a more satisfying feel if it uses a subtle squash effect on click. This level of detail is what separates good design from great design. You can learn more about our approach on our services page.

Our Process at a Glance

.my-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease-out;
}

By embracing this classic principle, we ensure that every interaction, no matter how small, contributes to the playful, organic, and tactile world of Molda. It’s more than just animation; it’s about making digital feel real.