Skip to content
Hz
esc
  • Micro
    Magnetic buttonR01 · quickTo
  • Line-mask headlineR02 · SplitText
  • OdometersoonR03 · Timeline
  • Text scrambleR04 · ScrambleText
  • Copy-button morphsoonR05 · MorphSVG
  • Directional underlinesoonR06 · Core
  • Squash togglesoonR07 · Core
  • Sliding tab indicatorR08 · Flip
  • Layout & scroll
    Flip filter gridR09 · Flip
  • Card to detailsoonR10 · Flip
  • Pinned horizontal galleryR11 · ScrollTrigger
  • Stacking cardssoonR12 · ScrollTrigger
  • Height-auto accordionR13 · Core
  • Scroll-read highlightR14 · ScrollTrigger
  • Clip-path image revealsoonR15 · Core
  • SVG line drawsoonR16 · DrawSVG
  • Physics & delight
    Velocity marqueeR17 · ScrollTrigger
  • Inertia carouselR18 · Draggable · Inertia
  • Route transitionR19 · App Router
  • Cursor followerR20 · quickTo
  • Toast stacksoonR21 · Flip
  • Draggable bottom sheetsoonR22 · Draggable
  • Cursor image trailsoonR23 · Core
  • Preloader handoffsoonR24 · Timeline
  • Pages
    All recipesHome
  • Easing labTool
  • DocsInstall and usage
  • AboutWhat Hz is
Tool · 11 eases

Easing lab

Scrub time and watch every ease race side by side. Pick one to see its curve, its value at any moment, and the code for GSAP and CSS.

expo.outp 0.912
t 0t 1

Character

Almost all the movement happens up front. Feels snappy and precise.

GSAP
gsap.to(el, { x: 240, duration: 0.6, ease: "expo.out" });
CSS
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
← Back to recipes