Easing, from linear to bezier.

When a property animates from value A to value B, easing controls how it gets there. Linear easing means constant speed throughout. Other eases speed up at the start, slow down at the end, overshoot and settle, or bounce.

Easing doesn’t change where the animation ends up. It changes the feel of how it gets there. Two animations with identical checkpoints and durations can feel completely different based on easing alone.

Glopzi’s default easing for new animations is linear. No acceleration, no deceleration, no opinionated feel. The reason: easing is style, and style should be a deliberate choice.

Most animation libraries default to something like ease-out or power2.out. Those are good defaults for someone who wants a polished feel without thinking about it. They’re bad defaults for a designer who wanted linear and got a slow-out without asking. Glopzi defers to you.

The right panel has a preset dropdown with the standard GSAP eases:

• none (linear): constant speed.
• power1, power2, power3, power4: polynomial curves of increasing strength. Each available as .in, .out, or .inOut.
• sine: gentle sine curve. Subtle ease, good for ambient motion.
• expo: exponential. Very dramatic acceleration or deceleration.
• circ: circular curve.
• back: overshoots and settles. Great for arrivals that should feel weighty.
• elastic: oscillates around the final value. Use sparingly; gets cartoonish fast.
• bounce: bounces against the final value like a ball hitting the ground. Same warning.

The .in / .out / .inOut suffix controls where in the animation the easing applies:.in eases the start, .out eases the end, .inOut eases both.

For full control, click the Custom button next to the ease dropdown. A Bezier editor opens:

• A square canvas with the curve plotted across it. X axis is time (0 to 1), Y axis is progress (0 to 1).
• Two draggable handles control the shape. Drag them anywhere; the curve follows.
• A preview pellet animates left-to-right using the current curve so you can feel the result before committing.
• A cubic-bezier(...) string below the canvas reflects the values; copy or paste-replace as needed.
• Quick presets along the bottom: ease, ease-in, ease-out, ease-in-out, plus the standard CSS named curves.

The custom Bezier serializes into the animation as a standard CSS cubic-bezier string. Anywhere you could paste a CSS easing function works.

Quick guide to common situations:

• Entrance reveals: power2.out or power3.out. Element decelerates as it arrives, feels like it’s settling into place.
• Exits: power2.in. Element accelerates as it leaves, feels purposeful.
• Continuous loops: sine.inOut. Smooth in both directions, no harsh edges.
• Scroll-driven motion: linear (none) usually feels right. The visitor’s scroll already provides natural ease; an additional ease compounds and feels mushy.
• Click flourishes: back.out(1.7) for tactile confirmation. Slight overshoot makes the click feel satisfying.

• Transform: x, y, scale, rotate, skew covers the properties easing usually applies to.
• Time-based animations and Scroll-based animations both expose the easing field.
• Declarative keyframes covers what easing connects (the values at each keyframe).