GSAP SlowMo Ease Function
-
Learn how GSAP SlowMo creates cinematic slow-fast-slow animations used in modern UI interactions.
Introduction
GSAP SlowMo is a special easing function that makes an animation:
Start slow → move fast → end slow
It is mainly used when you want animations to feel dramatic, cinematic, or premium.
Why use SlowMo?
-
Makes animations feel natural
-
Adds focus and attention
-
Used in hover effects, hero animations, banners
Where it is commonly used
-
Website hero sections
-
Card hover animations
-
Text reveals
-
Product showcase animations
-
Basic Syntax
ease: "slow"
With custom values
ease: "slow(0.7, 0.7, false)"
Basic Example
gsap.to(".box", {
x: 300,
duration: 2,
ease: "slow"
});
Parameters / Options
slow(ratio, power, yoyo)
Parameter Meaning Default ratio Controls how long the slow part lasts 0.7 power Strength of slow motion 0.7 yoyo Reverses slow effect false
Example with parameters
ease: "slow(0.5, 0.8, false)"
Button Hover Animation
gsap.to(".btn", {
scale: 1.2,
duration: 0.8,
ease: "slow"
});
Card Entrance Animation
gsap.from(".card", {
y: 100,
opacity: 0,
duration: 1.5,
ease: "slow(0.6, 0.6, false)"
});
Text Reveal Effect
gsap.from(".title", {
y: 50,
opacity: 0,
duration: 2,
ease: "slow"
});
Common Mistakes
❌ Using SlowMo everywhere
→ Use it only for important animations❌ Very long durations
→ Makes UI feel laggy❌ Wrong parameter values
→ Extreme values break smoothness❌ Using with tiny movements
→ SlowMo works best with noticeable motion
.png)