No Comments Yet
Be the first to share your thoughts and start the conversation.
Bounce Easing
Loading...
Loading...
Loading...
Be the first to share your thoughts and start the conversation.
When something drops onto your screen, it shouldn’t just stop. It should land.
And when it lands, it might bounce a little just like things do in the real world.
That’s where you use Bounce easing, which gives a feeling of weight, gravity, and tactile feedback.
Bounce easing simulates the behavior of a physical object falling and bouncing before settling.
It’s not about subtlety, it’s about fun, impact, and attention.
In GSAP, you get three variations of Bouncing:
ease: "bounce.in" // bounces as it entersease: "bounce.out" // bounces as it finishesease: "bounce.inOut" // bounces on both ends
The most commonly used one is bounce.out which is perfect for entrances.
Try it yourself to see how well and how nicely it bounces anything.
You can, as always, test it on Circle. Notice how each of these creates a bouncing effect on a circle.
Use bounce easing when you want an animation to feel playful or energetic, or Mimic physics (falling, landing, dropping) that grabs the user’s attention.
It’s ideal for toasts or alerts dropping in, cards landing into place, floating UI elements snapping into view, or button entrances on onboarding or gamified flows. It’s on you, and your product feels.
But don't overdo it. Bounce has character. Use it where it fits.
Bounce easing gives your UI weight and presence.
If used thoughtfully, it gives your product a playful, tactile feel that can delight users. But if you overdo it, things can get silly fast, so use it with care.
Next is More spring. More drama