Andres GonzalezFlowglad · Designer by day, Batman by night

How to create buttery smooooth text animations 🦇

15 Oct 2025 · 1 min

Watch on YouTube

0:41

In this tutorial segment, the creator critiques a basic text animation that uses a linear easing, describing it as flat and unappealing. He demonstrates three concrete improvements to make the animation feel smoother and more premium: (1) replace the linear easing with Framer’s built-in spring easing, which adds natural acceleration and deceleration; (2) introduce a slight delay for the sub‑headline and apply a per‑word stagger so the animation follows the page’s visual hierarchy; and (3) add a subtle 10‑pixel blur to the text, giving it a high‑end, “Bruce Wayne” polish. These steps collectively transform a rough animation into a buttery‑smooth, visually hierarchical, and premium‑looking effect.

Chapters

How do you go from this to this? And why does this one look and feel better? The first version is complete ass because it's not following some key design and animation principles that can make it feel way better. For starters, it's not using any sort of easing effect, which makes animations feel smooth and buttery. Simply changing this from linear to Framer's built-in spring easing effect takes us from horrible to good. But we can do better. We'll create a slight delay for the subheadline and set the effect to per word to follow the visual hierarchy on the page. And to bring this home even further, we'll add a 10-pixel blur to make this feel premium enough that Bruce Wayne himself would buy it.