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 fast
ease: "power2.out" // starts fast, ends slow
ease: "power2.inOut" // slow → fast → slowThe 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"></div>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 🙃
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"
});It makes it feel like it gently enters the screen.
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"
});It feels more polished and modern that way.
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 ♟️