Slowmo Studio

Slow down, pause or speed up every animation on a page: CSS, video, GSAP, Three.js, rAF and timers live.

Slowmo Studio — slow down, pause or speed up every animation on a page: CSS, video, GSAP, Three.js, rAF and timers live.

How to use Slowmo Studio

  1. Press Enable slow-mo, then pick a speed from pause to 10x
  2. Drag the dial to rotate it: 0.1x at the left, 1x straight up, 10x at the right
  3. Watch the live demos: CSS orbit, WAAPI ball, rAF pendulum and timer bar
  4. Compare the excluded grey orbit, which always runs at full speed
  5. Check the readouts: real time versus virtual time, animations tracked, timer ticks
  6. Use the speed presets or the log-scale slider for fine control
  7. Copy the quick start, full API or dial snippets for your own app

Features

  • Slow-motion studio built on the real seflless/slowmo repo (MIT, v0.16.2)
  • The full time engine ported: rAF, performance.now, Date.now and timer patching
  • Web Animations polling with original and applied playbackRate tracking
  • Media elements tracked with the browser 0.0625x to 16x clamp
  • Dial with the repo angle to speed log math, snap near 1x and localStorage persistence
  • Live demos for CSS, Web Animations API, rAF and setTimeout plus an excluded element
  • GSAP globalTimeline timeScale auto-detection and data-slowmo-exclude opt-out
  • Honest scope: core library and dial only; the AI recreate feature, CLI and extension are not included

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.