No Comments Yet
Be the first to share your thoughts and start the conversation.
Power Easing
Loading...
Loading...
Loading...
Be the first to share your thoughts and start the conversation.
These are your bread-and-butter easings. They describe how quickly the animation accelerates or decelerates.
They come in four variations:
And they each come in 3 directions:
ease: "power2.in" // starts slow, ends fastease: "power2.out" // starts fast, ends slowease: "power2.inOut" // slow → fast → slow
The higher the number, the more intense the curve. You can almost hear the motion in these names.
in ramps in. out eases out. inOut glides through.
Play yourself to see how each of these easing types feels differently.
If this isn't that clear, play with different power easings on this circle, and you'll get the idea.
Use them when you want natural motion but still controlled and UI-friendly.
They’re usually great for button hover effects, modals sliding in, cards or panels entering the screen, toasts, and notifications.
Let’s test your taste.
You’re designing a UI that has 3 elements:
<div class="btn"></div><div class="toast"></div><div class="card
Not really sure which works best? Totally okay.
This is your first easing challenge, and you haven’t even learned much yet. The goal here is to start playing, not perfecting.
Let’s go through what I would have done,
Button
.btn with power4.out for a fast and dramatic feel.
gsap.to(".btn", {y: -20,duration: 0.4,ease: "power4.out"})
It’s good for a button that feels instant and responsive.
Toast
.btn with power2.out for a balanced and smooth feel.
gsap.from(".toast", {x: -300,duration: 1.2,ease: "power2.out"});
Card
.card with power3.inOut for a confident and smooth both in and out.
gsap.from(".card", {scale: 0.5,opacity: 0,duration: 1,ease: "power3.inOut"}
But again, there’s no single “correct” solution here.
You could easily switch, .toast to power1.out for a gentler feel, .btn to power3.out for a less aggressive snap, and .card to power4.inOut if you want to really emphasize scale. Or something even totally different.
The best way to learn animation is by trying combinations, watching what feels good, and iterating.
So, just experiment.
Onward to next sine easing ♟️
Animate each with a different power easing that matches its role.
Don’t worry about getting it perfect. Try different easings and see how they feel. Ask yourself:
Make a design decision in the end 🙃
It makes it feel like it gently enters the screen.
It feels more polished and modern that way.