Spring Animation Guide

Using Motion React we can easily configure spring animation. So spring animation is basically a type of animation which gives you bouncy effect.

There're two different way of configuring Spring animation:

  1. Time: In this we can use bounce and duration.
  2. Physics: In this we can use stiffness, damping and mass.

In this specific example we'll go with physics way b'coz it gives you more control over the animation.

  • Stiffness:

    How fast the spring snaps back. Higher values mean more tension and a faster response. Lower values feel "lazy."

  • Damping:

    The friction. This controls how much the highlight bounces. Lower damping makes it oscillate longer.

  • Mass:

    The object's weight. Increasing mass makes it feel heavier, requiring more momentum to start and stop.

There're more than this you can check here. Below is the practical example of spring animation which I discussed ealier.

Play with the values,
See effect in below preview

Presets
250
35
2

http://localhost:3000/

Status: Currently Procrastinating

This is the Home Page

I spent hours on this site just for you to look at a single sentence. I hope you're happy.

Over-engineered

Why use 5 lines of CSS when you can use a 50MB library?

Blazing Fast

It loads so fast you won't even have time to reconsider your life choices.

This code component is inspired from shadcn/ui