Access the AI Animation Generator and premium effects
Upgrade your plan to keep generating animations and unlock premium effects.
Master the art of easing functions. Learn how to make animations feel natural, responsive, and delightful. From simple power eases to complex custom curves, discover every easing option GSAP offers.
Easing is the mathematical function that controls how an animation progresses over time. Without easing, animations move at a constant speed (linear)—they start at full velocity and stop instantly. With easing, animations accelerate and decelerate, creating motion that feels natural and responsive, mimicking real-world physics.
Easing is one of the most important aspects of animation. The same movement with different easing functions can feel completely different. A power2.out ease feels snappy and responsive. An elastic.out ease feels playful and bouncy. Understanding easing is the difference between animations that feel amateurish and animations that feel polished and professional.
// Linear motion - same speed throughout
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'none' // or 'linear'
});
// Eased motion - accelerates and decelerates
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'power2.out' // slow finish
});
// Ease directions
gsap.to('.element', { duration: 1, x: 100, ease: 'power2.in' }); // slow start
gsap.to('.element', { duration: 1, x: 100, ease: 'power2.out' }); // slow finish
gsap.to('.element', { duration: 1, x: 100, ease: 'power2.inOut' }); // slow start and finish
// The easing function describes the acceleration profile
// Try these and notice the motion difference:
gsap.to('.element', { duration: 1, x: 100, ease: 'power1.out' }); // gentle ease
gsap.to('.element', { duration: 1, x: 100, ease: 'power3.out' }); // stronger ease
gsap.to('.element', { duration: 1, x: 100, ease: 'power4.out' }); // very strong easeEvery animation you create should have intentional easing. Don't use the default ease() without thinking—choose based on the feeling you want to convey. The same duration with different easing can feel drastically different to the viewer.
Easing functions are built into GSAP core—no extra installations or imports needed! Whether you're using GSAP via CDN, NPM, or in Webflow, all easing functions are available immediately and ready to use.
Add GSAP via CDN and easing is already available:
<!-- Add before closing body tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
// Easing is already available!
gsap.to(".box", {
x: 500,
ease: "power2.out", // Just add ease property
duration: 1
});
</script>Install GSAP via npm:
npm install gsapimport { gsap } from "gsap";
// Easing works immediately
gsap.to(".box", {
x: 500,
ease: "back.out(1.7)", // Use any built-in ease
duration: 1
});As of 2025, GSAP is natively integrated into Webflow with all easing functions available. No setup needed—just use easing in your custom code:
GSAP's default ease is "power1.out"—a subtle ease that works well for most UI animations. You only need to specify ease when you want something different.
Every ease has three directions that control acceleration/deceleration. The direction dramatically changes how motion feels. ease-in starts slow and accelerates. ease-out starts fast and decelerates. ease-inOut combines both—slow start, fast middle, slow end.
ease-out is the most natural and is perfect for most animations. Use ease-in for entering animations that need to build momentum. Use ease-inOut for animations that need to smoothly transition both into and out of their motion.
// EASE-IN: Slow start, fast finish
// Use for: Animations entering from off-screen, building momentum
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'power2.in' // Starts slow, accelerates to finish
});
// EASE-OUT: Fast start, slow finish (MOST COMMON)
// Use for: Most animations, hover effects, fade-outs
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'power2.out' // Starts fast, decelerates to finish
});
// EASE-INOUT: Slow start and finish, fast middle
// Use for: Smooth transitions that need ramp-up and wind-down
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'power2.inOut' // Accelerates then decelerates
});
// Common direction combinations with different ease types
gsap.to('.btn', { duration: 0.3, scale: 1.1, ease: 'back.out' }); // Playful pop
gsap.to('.menu', { duration: 0.5, x: 0, ease: 'power3.out' }); // Fast entrance
gsap.to('.modal', { duration: 0.4, opacity: 0, ease: 'power2.in' }); // Smooth exit
// Comparison: Same animation, different directions
const duration = 1;
const distance = 100;
gsap.to('.in', { duration, x: distance, ease: 'power2.in' });
gsap.to('.out', { duration, x: distance, ease: 'power2.out' });
gsap.to('.inout', { duration, x: distance, ease: 'power2.inOut' });
// Visual difference is significant, so choose intentionally!Power eases are the foundation of GSAP easing. They range from power0 (linear, no easing) to power4 (maximum easing). Each level increases the intensity of acceleration/deceleration. power2 is the sweet spot for most animations—it's strong enough to feel polished but not so strong it looks exaggerated.
Power eases use exponential curves. Power0 is t^1, power1 is t^2, power2 is t^3, power3 is t^4, and power4 is t^5. Higher power = more dramatic acceleration/deceleration. Mathematically precise and highly predictable, making them perfect for UI animations.
// POWER EASES: Range from linear to extremely eased
// Each level adds more dramatic acceleration/deceleration
// power0: Linear motion (no easing)
gsap.to('.element', { duration: 1, x: 100, ease: 'power0.out' });
// power1: Gentle easing (t^2 curve)
gsap.to('.element', { duration: 1, x: 100, ease: 'power1.out' });
// power2: Medium easing (t^3 curve) - MOST COMMON DEFAULT
gsap.to('.element', { duration: 1, x: 100, ease: 'power2.out' });
// power3: Strong easing (t^4 curve)
gsap.to('.element', { duration: 1, x: 100, ease: 'power3.out' });
// power4: Very strong easing (t^5 curve)
gsap.to('.element', { duration: 1, x: 100, ease: 'power4.out' });
// Real-world examples
// Hover effect: Quick, snappy response
gsap.to('.button', { duration: 0.3, scale: 1.05, ease: 'power2.out' });
// Page entrance: Smooth arrival with deceleration
gsap.from('.card', { duration: 0.8, opacity: 0, y: 50, ease: 'power3.out' });
// Modal close: Quick dismissal
gsap.to('.modal', { duration: 0.4, scale: 0.9, opacity: 0, ease: 'power1.in' });
// When to use each:
// power0: Loading indicators, constant speed animations
// power1: Subtle animations, menu items
// power2: Default choice for most animations (buttons, slides, etc.)
// power3: Dramatic entrances, hero animations
// power4: Very dramatic effects (use sparingly for special moments)Beyond power eases, GSAP includes named eases that add personality and flavor to animations. bounce creates bouncing effects. elastic adds spring/wobble. back adds anticipation (slight reversal before moving forward). circ, expo, and sine use different mathematical curves. Use these strategically to make animations feel playful, elastic, or dramatic.
Named eases work with directions too: bounce.out, elastic.in, back.inOut, etc. Each combination creates unique motion. These eases are perfect for UI elements that need personality—buttons, toggles, notifications. Use them sparingly in professional designs to avoid looking unprofessional.
// BOUNCE: Creates bouncing effect at end
// Use for: Playful animations, toggle buttons, notifications
gsap.to('.element', { duration: 1, x: 100, ease: 'bounce.out' });
// ELASTIC: Creates spring/wobble effect
// Use for: Elastic transformations, attention-grabbing effects
gsap.to('.element', { duration: 1, x: 100, ease: 'elastic.out' });
// BACK: Creates anticipation (goes backward slightly before forward)
// Use for: Standout animations, dramatic entrances, attention effects
gsap.to('.element', { duration: 1, x: 100, ease: 'back.out' });
// CIRC: Circular easing (smooth deceleration)
// Use for: Smooth, natural motion alternative to power eases
gsap.to('.element', { duration: 1, x: 100, ease: 'circ.out' });
// EXPO: Exponential easing (dramatic acceleration/deceleration)
// Use for: Very fast animations, attention-grabbing movements
gsap.to('.element', { duration: 1, x: 100, ease: 'expo.out' });
// SINE: Sine wave easing (very smooth)
// Use for: Subtle animations, continuous motion effects
gsap.to('.element', { duration: 1, x: 100, ease: 'sine.out' });
// Real-world examples
// Button click feedback - playful bounce
gsap.to('.button', {
duration: 0.6,
scale: 1.2,
ease: 'bounce.out'
});
// Menu toggle - elastic pop
gsap.to('.menu-icon', {
duration: 0.5,
rotation: 360,
ease: 'elastic.out'
});
// Modal entrance - anticipation effect
gsap.from('.modal', {
duration: 0.8,
scale: 0.5,
ease: 'back.out'
});
// Notification alert - smooth entrance
gsap.from('.alert', {
duration: 0.5,
y: -50,
ease: 'sine.out'
});
// WARNING: Use named eases sparingly in professional designs
// They add personality but can look unprofessional if overused
// Good for: Interactive elements, micro-interactions, playful apps
// Avoid in: Serious/corporate designs, accessibility-critical animationsPlayful/Fun Apps:
Professional/Smooth:
For ultimate control, create custom easing curves. GSAP's CustomEase plugin lets you define animations with pixel-perfect easing via visual editor or bezier coordinates. You can also use standard CSS cubic-bezier syntax for curves. Custom eases are perfect when preset eases don't match your vision exactly.
Bezier curves use control points to define the curve shape. The ease curve's vertical position at any time represents the animation's progress at that point. Steep sections = fast motion, flat sections = slow motion. This gives you complete control over motion timing.
// METHOD 1: Cubic-Bezier (CSS standard)
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
});
// METHOD 2: Register CustomEase plugin
gsap.registerPlugin(CustomEase);
// Define a custom ease by hand
CustomEase.create('myEase', 'M0,0 L0.2,0.1 L0.5,0.8 L1,1');
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'myEase'
});
// METHOD 3: CustomEase from visualization
// Use GSAP ease visualizer to draw, then copy the definition
gsap.registerPlugin(CustomEase);
CustomEase.create('custom', 'M0,0 C0.2,0 0.3,1 1,1');
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'custom'
});
// Useful cubic-bezier values (copy/paste these):
const eases = {
'ease-in': 'cubic-bezier(0.42, 0, 1, 1)',
'ease-out': 'cubic-bezier(0, 0, 0.58, 1)',
'ease-inOut': 'cubic-bezier(0.42, 0, 0.58, 1)',
'easeInQuad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
'easeOutQuad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'easeInCubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
'easeOutCubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
'smooth': 'cubic-bezier(0.4, 0.0, 0.2, 1)'
};
gsap.to('.element', {
duration: 1,
x: 100,
ease: eases['easeOutQuad']
});
// Combine custom eases with timeline
const tl = gsap.timeline();
tl.to('.element', { duration: 1, x: 100, ease: 'myCustomEase' })
.to('.element', { duration: 0.8, y: 50, ease: 'cubic-bezier(0.34, 1.56, 0.64, 1)' });
Stepped easing divides animation progress into discrete steps instead of smooth curves. Perfect for frame-by-frame animation effects, sprite animation, or creating "snappy" motion. Use steps() to specify the number of steps, or SteppedEase plugin for more control.
Stepped easing jumps between values at regular intervals, creating a mechanical or pixelated feel. With many steps (20+), it approximates smooth motion. With few steps (3-5), it creates dramatic frame-by-frame effects. Perfect for pixel art animations, progress indicators, or retro aesthetics.
// STEPPED EASES: Discrete steps instead of smooth curves
// Using steps() - built-in CSS function
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'steps(5)' // 5 discrete steps
});
// With direction modifiers
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'steps(5, start)' // Jump at start of each step
});
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'steps(5, end)' // Jump at end of each step
});
// SteppedEase plugin for more control
gsap.registerPlugin(SteppedEase);
SteppedEase.create('myStepped', 8); // 8 steps
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'myStepped'
});
// Real-world examples
// Sprite animation (walking character)
gsap.to('.character', {
duration: 2,
backgroundPosition: '-400px 0', // 4 frames × 100px
ease: 'steps(4)' // One frame per step
});
// Mechanical counter (odometer effect)
gsap.to('.number', {
duration: 3,
innerText: 9999,
snap: { innerText: 1 }, // Snap to integers
ease: 'steps(9999)' // Step per number
});
// Loading progress bar (chunky animation)
gsap.to('.progress', {
duration: 3,
width: '100%',
ease: 'steps(10)' // 10% increments
});
// Pixel art animation
gsap.timeline()
.to('.pixel-char', { duration: 1, x: 100, ease: 'steps(4)' })
.to('.pixel-char', { duration: 0.8, y: 50, ease: 'steps(4)' })
.to('.pixel-char', { duration: 0.6, rotation: 360, ease: 'steps(8)' });
// Comparison: Smooth vs Stepped
gsap.to('.smooth', { duration: 1, x: 100, ease: 'power2.out' });
gsap.to('.stepped', { duration: 1, x: 100, ease: 'steps(6)' });The ease visualizer is an interactive tool that displays ease curve graphs. Each curve shows how your animation accelerates and decelerates over time. A steep curve = fast motion, flat curve = slow motion. Compare eases side-by-side to choose the perfect motion for your animation. Visualizing eases helps you understand exactly what each ease does.
The X-axis represents time (0-100%), the Y-axis represents animation progress (0-100%). A linear curve is a perfect diagonal. Curves above the diagonal move faster, curves below move slower. The visualizer shows both the mathematical curve and a live animation preview so you can see the motion in action.
// How to read ease curves:
// ═════════════════════════════════════════════════════════════
// X-axis: Time (0% to 100% of animation duration)
// Y-axis: Animation progress (0% to 100% of target value)
// ═════════════════════════════════════════════════════════════
// LINEAR: Straight diagonal line (constant speed)
// ┌─────────────────────────────────┐
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// │ ╱ │
// └─────────────────────────────────┘
// POWER2.OUT: Starts fast, slows down (most common)
// ┌─────────────────────────────────┐
// │ ╱╱╱╱╱╱╱╱╱╱╱╱╱ │
// │ ╲╲╲╲╲ │
// │ ╲╲╲╲ │
// │ ╲╲╲ │
// │ ╲╲ │
// │ ╲ │
// │ ╲│
// └─────────────────────────────────┘
// BOUNCE.OUT: Multiple bounces at end
// ┌─────────────────────────────────┐
// │ ╱╱╱╱╱╱╱╱╱ │
// │ ╲ ╱───╲ ╱──╲ ╱ │
// │ ╲ ╱ ╲╱ ╱ │
// │ ╲╱ ╱ │
// │ ╱ │
// │ ╱ │
// └─────────────────────────────────┘
// Steep = fast motion at that time
// Flat = slow motion at that time
// Curves below diagonal = slow acceleration
// Curves above diagonal = fast acceleration
// Use visualizer to compare and choose the best ease
gsap.to('.element', {
duration: 1,
x: 100,
ease: 'power2.out' // Use visualization to confirm this feels right
});Choosing the right ease depends on the animation's purpose, duration, and context. General rule: use power2.out for most animations—it's versatile and feels natural. For attention-grabbing effects, use power3.out or back.out. For playful UIs, use bounce.out or elastic.out. For serious/professional designs, stick with power eases.
Consider the animation duration too. Short animations (< 0.3s) work with snappy eases like power2.out. Longer animations (> 0.8s) can handle more complex eases. Match the ease to the user's expectations—entrance animations feel right with ease-out, exits with ease-in, smooth transitions with ease-inOut.
// PRACTICAL EASING RECOMMENDATIONS BY USE CASE
// ═══════════════════════════════════════════════════════════
// 1. BUTTON INTERACTIONS (hover, click)
// Duration: 0.2-0.4s | Feeling: Snappy, responsive
gsap.to('.button', { duration: 0.3, scale: 1.05, ease: 'power2.out' });
gsap.to('.button', { duration: 0.2, y: -2, ease: 'power1.out' }); // Subtle press
// 2. PAGE ENTRANCE ANIMATIONS (fade in on load)
// Duration: 0.6-1s | Feeling: Smooth, professional
gsap.from('.hero', { duration: 0.8, opacity: 0, ease: 'power2.out' });
gsap.from('.card', { duration: 1, y: 50, opacity: 0, ease: 'power3.out', stagger: 0.1 });
// 3. MODAL/DIALOG OPEN
// Duration: 0.4-0.6s | Feeling: Smooth pop-in
gsap.from('.modal', { duration: 0.4, scale: 0.9, opacity: 0, ease: 'back.out' });
// 4. MENU/DRAWER TOGGLE
// Duration: 0.3-0.5s | Feeling: Smooth slide
gsap.to('.menu', { duration: 0.4, x: 0, ease: 'power2.inOut' });
gsap.to('.menu', { duration: 0.4, x: '-100%', ease: 'power2.in' }); // Close
// 5. SCROLL REVEAL ANIMATIONS
// Duration: 0.8-1.2s | Feeling: Steady entrance
gsap.from('[data-scroll]', {
scrollTrigger: { trigger: '[data-scroll]' },
opacity: 0,
y: 100,
duration: 1,
ease: 'power2.out'
});
// 6. LOADING/PROGRESS INDICATORS
// Duration: Variable | Feeling: Mechanical, reliable
gsap.to('.progress-bar', { duration: 2, width: '100%', ease: 'none' });
gsap.to('.spinner', { duration: 1, rotation: 360, ease: 'none', repeat: -1 });
// 7. ALERT/NOTIFICATION DISMISS
// Duration: 0.3-0.5s | Feeling: Quick exit
gsap.to('.alert', { duration: 0.4, x: 100, opacity: 0, ease: 'power1.in' });
gsap.to('.alert', { duration: 0.3, y: -100, opacity: 0, ease: 'power2.in' });
// 8. FORM FOCUS ANIMATION
// Duration: 0.2-0.3s | Feeling: Delicate
gsap.to('.input-border', { duration: 0.25, scaleX: 1, ease: 'power2.out' });
// 9. TAB/ACCORDION OPEN
// Duration: 0.3-0.5s | Feeling: Smooth expand
gsap.to('.accordion-content', { duration: 0.4, height: 'auto', ease: 'power2.out' });
// 10. PLAYFUL/FUN ANIMATIONS (game, toy site)
// Duration: 0.5-1s | Feeling: Energetic, fun
gsap.to('.character', { duration: 0.6, y: -20, ease: 'bounce.out' });
gsap.to('.item', { duration: 0.8, rotation: 360, ease: 'elastic.out' });
// DECISION TREE:
// ═════════════════════════════════════════════════════════════
// Is it a UI interaction (hover/click)?
// → Use power2.out (short duration 0.2-0.4s)
//
// Is it an entrance animation?
// → Use power2.out or power3.out (duration 0.6-1s)
//
// Is it a playful/fun effect?
// → Use bounce.out, elastic.out, or back.out (longer duration)
//
// Is it a serious/professional design?
// → Stick with power eases, avoid named eases
//
// Is it a complex motion or transition?
// → Use power2.inOut or power3.inOut
//
// When in doubt, use power2.out!Using GSAP easing functions in React is straightforward with the useGSAP hook. This hook handles cleanup automatically, prevents memory leaks, and ensures animations stop when components unmount. All easing functions work the same way in React as they do in vanilla JavaScript.
import { useRef } from 'react';
import { gsap } from 'gsap';
import { useGSAP } from '@gsap/react';
export function AnimatedList() {
const container = useRef();
useGSAP(() => {
// Animate with easing on mount
gsap.from('.item', {
y: 50,
opacity: 0,
stagger: 0.1,
ease: 'back.out(1.7)', // Any ease works here
duration: 0.6
});
}, { scope: container });
return (
<div ref={container}>
<div className="item">Item 1</div>
<div className="item">Item 2</div>
<div className="item">Item 3</div>
</div>
);
}
// With hover interaction
export function HoverButton() {
const btn = useRef();
useGSAP(() => {
const handleHover = () => {
gsap.to(btn.current, {
scale: 1.1,
duration: 0.3,
ease: 'power2.out' // Responsive feel
});
};
const handleHoverOut = () => {
gsap.to(btn.current, {
scale: 1,
duration: 0.3,
ease: 'power2.out'
});
};
btn.current?.addEventListener('mouseenter', handleHover);
btn.current?.addEventListener('mouseleave', handleHoverOut);
return () => {
btn.current?.removeEventListener('mouseenter', handleHover);
btn.current?.removeEventListener('mouseleave', handleHoverOut);
};
}, { scope: btn });
return <button ref={btn}>Hover Me</button>;
}As of 2025, GSAP is natively integrated into Webflow with all easing functions available. Simply enable GSAP in project settings and use easing functions in your custom code blocks. No installation needed.
// In Webflow custom code block (with GSAP enabled in settings)
document.addEventListener('DOMContentLoaded', () => {
// Animate hero image on page load
gsap.from('.hero-image', {
scale: 0.8,
opacity: 0,
ease: 'power3.out', // All eases work here
duration: 1.2
});
// Button hover animation
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mouseenter', () => {
gsap.to(btn, {
scale: 1.05,
duration: 0.3,
ease: 'power2.out'
});
});
btn.addEventListener('mouseleave', () => {
gsap.to(btn, {
scale: 1,
duration: 0.3,
ease: 'power2.out'
});
});
});
// Staggered list animation
gsap.from('.list-item', {
y: 20,
opacity: 0,
stagger: 0.1,
ease: 'back.out',
duration: 0.8
});
});
// ScrollTrigger example (requires ScrollTrigger plugin enabled)
gsap.registerPlugin(ScrollTrigger);
gsap.from('.fade-on-scroll', {
scrollTrigger: {
trigger: '.fade-on-scroll',
start: 'top 80%'
},
opacity: 0,
y: 50,
ease: 'power2.out',
duration: 1
});Here are production-ready examples demonstrating easing in real-world scenarios. Copy, customize, and use directly in your projects.
// Example 1: Button Hover with Spring
gsap.to('.btn', {
duration: 0.3,
scale: 1.05,
ease: 'back.out'
});// Example 2: Staggered List Items
gsap.from('.list-item', {
duration: 0.8,
y: 30,
opacity: 0,
stagger: 0.1,
ease: 'power3.out'
});// Example 3: Hero Section Entrance
gsap.from('.hero', {
duration: 1,
opacity: 0,
y: 50,
ease: 'power2.out'
});// Example 4: Modal Open Animation
gsap.from('.modal', {
duration: 0.4,
scale: 0.8,
opacity: 0,
ease: 'back.out(1.7)'
});// Example 5: Mobile Menu Slide
gsap.to('.menu', {
duration: 0.4,
x: 0,
ease: 'power2.inOut'
});These examples cover: basic interactions, entrance animations, UI state changes, scroll effects, micro-interactions, loading states, navigation animations, form interactions, and more. Each demonstrates proper easing choices for real-world use cases.
Never use easing by accident. Always select based on the feeling you want to convey. power2.out is safe default, but specific eases create better motion.
Use 1-2 ease types throughout your design. Switching constantly looks chaotic. Establish an easing palette and stick to it for cohesion.
Short animations (< 0.3s) use power2.out. Medium (0.3-0.8s) can handle power2-3.out. Longer (> 0.8s) allow complex eases like bounce or elastic.
Named eases (bounce, elastic) add personality but can look unprofessional if used everywhere. Use them for specific accent animations, not everything.
Always test easing on actual devices. What feels good in your browser might feel sluggish or snappy on different hardware. Adjust duration based on device performance.
Check user motion preferences. Disable or simplify animations for users with motion sensitivity. Easing is enhancement, never required functionality.
ease: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'. With CustomEase, define once with CustomEase.create('myEase', 'M0,0 L...') and reuse throughout your project. This gives you pixel-perfect control over motion timing.
.in means slow start, .out means slow end, .inOut means slow start and end. So 'bounce.out' applies the bounce effect with deceleration. You can combine any ease type with any direction for different effects.
power2.out or power3.out with a short duration (0.2-0.3s) for a responsive feel. For playful buttons, back.out adds anticipation. For loading indicators, use ease: 'none' or power0. For menu/dropdown animations, power2.inOut creates smooth in-and-out motion. Match the ease to your design's personality.
You now understand easing functions, directions, and how to choose the perfect ease for every animation. From simple power eases to complex custom curves, you have the knowledge to create animations that feel natural, responsive, and professional. The difference between good and great animations is easing—choose intentionally.