Easing

circ

circ is a GSAP easing family (`circ.in`, `circ.out`, `circ.inOut`) whose curve traces a quarter circle, so the motion is nearly flat through the middle and bends hard at one or both ends. That gives it a sharper, more sudden ramp than `sine`, which follows a gentler quarter sine wave.

Updated July 1, 2026

Mechanics

How circ works

The three variants sample a unit circle. circ.out follows sqrt(1 - (t - 1)^2), circ.in follows 1 - sqrt(1 - t^2), and circ.inOut stitches the two halves together. Because the curve is a quarter circle, its slope is close to vertical right at the fast end, which is why the ramp reads as sudden rather than gradual.

circ.out launches with almost the full speed already spent in the first frames, then flattens into a long, slow settle. It's close in feel to expo.out, but the tail is even flatter, so the element looks like it decelerates into a near-stop before it actually lands. circ.in is the mirror: it creeps, then rips away at the end, useful for exits that should feel like the element gets yanked off screen.

script.js

The sharpest eases are the ones to cut for reduced motion

circ's hard ramp is exactly the kind of sudden movement that can trigger vestibular discomfort, and reduced-motion is now the most-adopted user preference query, up from 34% of sites in 2022 to over 50% of mobile sites in 2024 (HTTP Archive Web Almanac 2024, Accessibility). Gate the animation behind gsap.matchMedia() with a (prefers-reduced-motion: reduce) query and drop to duration: 0 or a plain fade for those users.
When

Use circ for

  • Circular or radial reveals (an expanding clip-path circle, a mask growing from a point) where the ease and the geometry are both arcs
  • Entrances that should feel like they snap most of the way in, then coast to rest (circ.out)
  • Exits that build slowly and then accelerate off screen (circ.in)
  • Scale pops and image reveals where you want a firmer, less springy arrival than back.out
Alternatives

Use something else when

  • You want the standard responsive UI feel, expo.out is the safer default and lands slightly softer
  • The motion should feel gentle and organic, sine.inOut bends far less at the ends
  • You need a bit of overshoot at the end, back.out(1.7) overshoots and settles
  • Continuous loops (marquee, spinner), use none (linear), an ease makes a loop pulse

circ.inOut can feel too abrupt

The double bend on circ.inOut makes the start and end both hard, which reads as jerky on longer UI moves. For a symmetric in-out that stays smooth, reach for power2.inOut or sine.inOut first, and keep circ.inOut for short, punchy transitions.
In production

Where circ fits in Annnimate components

Both of these components expose a data-anm-ease control, so you can drop circ.out in without touching the source. circ is a natural swap in each for the reasons below.

  • Mask Reveal grows a circle or shape mask across the section on scroll. Setting the ease to circ.out matches the ease curve to the mask geometry, the arc opens fast and eases into full coverage instead of creeping the whole way
  • Popping Text scales characters in with a bounce by default. Swap the ease to circ.out when you want the characters to snap into place with a firmer arrival and no overshoot, a cleaner read for corporate or editorial headlines
Used in components

See it running in production

Mask RevealContent opens up or closes down through a shape as you scroll, a circle, oval, rectangle, blob or your own shape.Popping TextLetters pop into place one by one, scaling up from nothing with a little bounce and a random tilt.
FAQ

Common questions

What's the difference between circ and expo easing?
They're close cousins. Both circ.out and expo.out start fast and decelerate hard, but circ is derived from a circle arc and expo from an exponential curve. In practice circ.out has an even flatter tail, so the element looks like it stops just before it lands. For most UI, expo.out is the go-to default, reach for circ.out when you specifically want that near-stop settle or a radial reveal.
Is circ.out good for entrances?
Yes. Like every .out ease, the slowest part of circ.out is at the end, which is the landing, so it's the right pick for something arriving on screen. Use circ.in only for exits, where you want the element to build speed and shoot away.
Why does circ feel more sudden than sine?
Because the curves bend by different amounts. sine follows a quarter sine wave, which is a soft, gradual arc. circ follows a quarter circle, which curls much harder near its fast end, so the acceleration (or deceleration) is packed into a shorter slice of the duration. Same 'ease out' idea, sharper delivery.
Do I need a plugin to use circ?
No. circ.in, circ.out, and circ.inOut ship in the GSAP core, same as power, sine, expo, and back. No registration, no import beyond gsap itself. As of GSAP 3.15 the whole library and every plugin is free, so there's nothing gated here either.
Previousback.outback.out is a GSAP ease that overshoots its destination, then settles back.NextCustomBounceCustomBounce is a GSAP easing plugin that builds a tunable bounce curve you shape yourself, instead of the one fixed shape you get from the built-in bounce.out.
Related conceptsease-in-outexpo.outsine