Easing

sine

sine is the gentlest of GSAP's standard easing families, built on a segment of a sine wave so its acceleration and deceleration are only slightly stronger than linear. It ships as `sine.in`, `sine.out`, and `sine.inOut`, and it's the ease you reach for when motion should feel eased but not obviously eased.

Updated July 1, 2026

Mechanics

How sine works

sine maps animation progress onto a piece of a sine wave. sine.out uses the first quarter of the curve (sin(t * PI/2)), which rises quickly at the start and flattens toward the end, so it decelerates. sine.in is the mirror (1 - cos(t * PI/2)), starting slow and speeding up. sine.inOut uses a half wave (-(cos(PI * t) - 1) / 2), easing symmetrically at both ends.

What sets sine apart from the rest of the standard set is how little it bends. Of the built-in curves, sine deviates the least from a straight line, so sine.out covers about 30% of the distance in the first 30% of the time where expo.out would already be past 80%. That mildness is the whole point: the motion reads as smoothed, not as launched and settled.

script.js

sine is part of GSAP's core, so there's no plugin to register. You pass it as a string like any other ease.

When

Use it for

Most web motion is quiet: 91.7% of mobile pages ship a CSS transition and only 18.4% load a JavaScript animation library (HTTP Archive Web Almanac, 2024). sine is the GSAP ease that matches that restraint, so it fits the moments where you want smoothing without a visible curve.

  • Looping ambient motion (a floating badge, a breathing glow, a subtle bob) with repeat: -1 and yoyo: true
  • Oscillating effects where each cycle needs to turn around softly instead of snapping at the extremes
  • Long, slow moves where a stronger ease would leave a dead tail of imperceptible movement
  • Continuous wave or shimmer patterns across a stagger, so neighbouring elements blend rather than pop
Alternatives

Use something else when

  • You want a snappy, responsive UI landing, use expo.out or power4.out, sine is too soft to read as intentional on a short reveal
  • The move needs a clear sense of arrival with weight, use back.out(1.7) so it overshoots and settles
  • You need a truly constant speed (a marquee, a spinner, a scrub), use none, sine still slows at the ends
  • The animation is under about 0.3s, the difference between sine and linear is invisible at that length, so pick the ease that matches the longer siblings in the same component
In production

Used in these Annnimate components

  • The Text Shimmer Wave uses sine.inOut on the per-character rotateY, so each letter tilts out and back through the smooth turn of the curve and the wave reads as continuous rather than a row of discrete flips
  • The Marquee deliberately does NOT use sine, its loop runs on ease: "none" because a ticker needs constant speed, sine is the ease you would swap in the moment you want that track to slow-in and slow-out instead

Pairing tip

sine loves yoyo: true with an infinite repeat. Because both ends of sine.inOut decelerate, the turnaround at the top and bottom of a yoyo cycle has no visible seam, which is why it's the default choice for idle, breathing motion.
Used in components

See it running in production

Text Shimmer WaveA shimmer that runs across the letters of your text one after another, like light passing over it.Infinite MarqueeA row of content that scrolls on its own, sideways or up and down, and you can grab it to scrub through and let go to keep it going.
FAQ

Common questions

What's the difference between sine.in, sine.out, and sine.inOut?
sine.in starts slow and speeds up (use it for exits that accelerate away). sine.out starts at speed and slows to a soft stop (use it for entrances that arrive gently). sine.inOut eases at both ends and is the one you want for looping or oscillating motion, since each turnaround is smooth. If you only remember one, remember sine.inOut.
When should I use sine instead of power1?
They're close, both are mild curves, but sine is even gentler than power1 and its inOut turnaround is perfectly symmetric, which makes it the better pick for yoyo loops and continuous waves. For a one-shot UI transition where you want a touch more snap, power1.out (or stronger) reads better. sine shines on the slow, ambient stuff.
Is sine good for a floating or breathing animation?
Yes, it's the standard choice. Combine ease: "sine.inOut" with repeat: -1 and yoyo: true. Because sine.inOut slows into both ends of the tween, the element pauses imperceptibly at the top and bottom of each cycle, so the loop never looks like it's snapping direction. That's exactly the feel you want for an idle bob or a pulsing glow.
Does sine need a plugin or registration?
No. sine is part of GSAP core along with power1 through power4, expo, circ, back, elastic, and bounce. Just pass ease: "sine.inOut", there's nothing to import or register. Only CustomEase and a few specialty eases live in separate plugins, and those have been free since GSAP 3.13.
sine vs none (linear), when does the difference actually show?
On very short tweens (under ~0.3s) the two look identical, so don't agonize over it there. The gap becomes visible on longer moves: linear feels mechanical and robotic because it starts and stops dead, while sine softens the two ends just enough to read as natural without looking heavily eased. Use none only when you genuinely need constant velocity, like a marquee or a spinner.
Previousroughrough is a GSAP ease from the EasePack plugin that jitters an animation's progress through randomized in-between points instead of moving it smoothly, so a value arrives with a shaky, hand-drawn or glitchy feel.Nextslowslow is a GSAP ease from EasePack that runs fast at the start and end of a tween and slows down through the middle, so the value lingers where the eye can actually read it.
Related conceptsease-in-outpower4.outexpo.out