Easing

slow

slow 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. You call it as the string `slow(linearRatio, power, yoyoMode)`, and it exists for numbers and text that need a readable dwell instead of a snap to rest.

Updated July 1, 2026

Mechanics

How slow works

Most eases spend their slow moment at one end. expo.out decelerates into the landing, power2.in accelerates out of the start. slow puts the slow part in the MIDDLE. The tween ramps in quickly, holds a near-linear crawl through the center, then ramps out quickly to the destination. That center crawl is the whole point: it's the frame where a changing number or a moving line of text is legible.

The string takes three arguments, slow(linearRatio, power, yoyoMode), and all three have defaults of 0.7, 0.7, false. linearRatio is the fraction of the tween spent in the slow middle, so 0.6 gives the value a slow read across 60% of the duration. power controls how sharp the fast ramps into and out of that middle are, higher is more abrupt. yoyoMode is a boolean: leave it false for a normal start-to-end progression with a slow middle, set it true when you want the value to travel out to a peak and come back within one tween.

script.js

Reduced motion

A slow tween dwells, so it runs longer than a snappy expo.out and reads as more motion to sensitive users. prefers-reduced-motion passed 50% adoption on mobile sites in 2024, up from 34% in 2022 (Web Almanac 2024, Accessibility), so wrap a long slow read in gsap.matchMedia() and drop the duration or cut the dwell when reduce is set.
When

Use it for

  • Animated number read-outs and counters where the final figure needs a beat to land
  • Hero stat reveals (metrics, prices, percentages) that would blur past at a constant speed
  • Cinematic text that fades through a phrase and holds the legible frame in the middle
  • Shimmer or highlight sweeps where the shine should dwell over each word, not skim across it
Alternatives

Use something else when

  • The element just needs to settle on arrival, use expo.out for a fast start and a soft landing with no lingering middle
  • You want a symmetric ramp in and out with no flat hold, use power2.inOut
  • The value should flash out to a peak and return, use slow(0.7, 0.7, true) with yoyoMode on, or a yoyo tween
  • You need exact control over where the hold sits, draw the curve with CustomEase
In production

Used in these Annnimate components

The slow ease shows up wherever a component wants the reader to catch the middle of a move, not just the endpoints. Two examples:

  • The Cinematic Text component eases each line in, holds it through the readable center, and eases it out without a hard cut
  • The Text Shimmer Wave paces its highlight sweep with a slow middle so the shine dwells over each glyph instead of racing across the word
Used in components

See it running in production

Cinematic TextBig headlines slide in from the sides as you scroll, by line, word or letter.Text Shimmer WaveA shimmer that runs across the letters of your text one after another, like light passing over it.
FAQ

Common questions

What do the numbers in slow(0.7, 0.7) mean?
The first is linearRatio, the fraction of the tween spent in the slow middle (0.7 means 70% of the duration is the slow read). The second is power, how sharply the tween ramps into and out of that middle. There's an optional third boolean, yoyoMode, that makes the value travel out and back within one tween. All three default to 0.7, 0.7, false if you write it as the bare string slow.
Do I need a plugin to use the slow ease?
Yes. slow is SlowMo from EasePack, so import { EasePack } from 'gsap/EasePack' and gsap.registerPlugin(EasePack) once at module load. EasePack is a free plugin, and every GSAP plugin has been free including commercial use since the Webflow acquisition made GSAP fully free (live April 30 2025). Forgetting to register is the usual reason the string falls back to a default ease.
How is slow different from power2.inOut?
power2.inOut is a symmetric ramp: it speeds up out of the start and slows into the end, with no flat section in between. slow has an actual near-linear slow segment in the middle that you can size with linearRatio. If you want a value to be readable partway through the move, inOut won't hold it, slow will.
Why does my number counter blur past the final value?
With a constant rate or an ease-out, the last stretch of the count still moves fast, so the final figure snaps in. slow keeps a slow, readable middle and then reaches the end, which gives the number a beat to land. Pair it with a rounding step in onUpdate, or gsap.utils.snap, so you're not rendering fractional values.
What does yoyoMode do on slow?
With yoyoMode true, the tween eases out to its destination value and back to the start within a single play, instead of a straight start-to-end progression. It's for a value that should flash to a peak and return, like a highlight that sweeps in and recedes. Leave it false for a normal counter or text reveal.
Previoussinesine 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.Nextsteps()steps() is a GSAP ease that quantizes a tween's progress into a fixed number of discrete jumps instead of interpolating smoothly, so the animated value snaps between set positions.
Related conceptsease-in-outCustomEaseexpo.out