Accessibility / Motion / Motion Inspector

The Motion Inspector bookmarklet lists all CSS animations and Web Animations API animations on the page with controls to pause, play, or slow them. Uses `document.getAnimations()` to find all active animations, displays a panel showing each animation's play state, duration, iterations, and playback rate, and provides buttons to pause all animations, play all animations, set half-speed playback, or restore normal speed. Useful for testing animation controls and verifying that animations can be paused. Run again to remove.

WCAG SC 2.3.3: Animation from Interactions
Run Motion Inspector

Test run or drag to
bookmarklets bar to install

javascript:%21function()%7B%22use%20strict%22%3Btry%7Bconst%20e%3D%22a11y-motion-inspector%22%3Bif(document.getElementById(e))return%20void%20document.getElementById(e).remove()%3Bconst%20t%3Ddocument.createElement(%22div%22)%3Bt.id%3De%2Ct.style%3D%22position%3Afixed%3Bz-index%3A2147483647%3Bright%3A8px%3Bbottom%3A8px%3Bwidth%3A360px%3Bmax-height%3A60vh%3Boverflow%3Aauto%3Bbackground%3A%23fff%3Bborder%3A1px%20solid%20%23ccc%3Bborder-radius%3A10px%3Bbox-shadow%3A0%204px%2020px%20rgba(0%2C0%2C0%2C.15)%3Bfont%3A12px%20ui-monospace%2Cmonospace%3Bpadding%3A10px%22%3Bconst%20o%3Ddocument.createElement(%22div%22)%3Bo.style%3D%22display%3Agrid%3Bgap%3A6px%22%3Bconst%20n%3Ddocument.createElement(%22div%22)%3Bn.style%3D%22display%3Aflex%3Bgap%3A6px%3Bmargin-bottom%3A8px%22%3Bconst%20a%3D(e%2Ct)%3D%3E%7Bconst%20o%3Ddocument.createElement(%22button%22)%3Breturn%20o.textContent%3De%2Co.style%3D%22padding%3A6px%208px%3Bborder%3A1px%20solid%20%23ccc%3Bborder-radius%3A8px%3Bbackground%3A%23fafafa%3Bcursor%3Apointer%22%2Co.onclick%3Dt%2Co%7D%2Cr%3Ddocument.getAnimations%3Fdocument.getAnimations()%3A%5B%5D%2Cc%3D()%3D%3E%7Bo.innerHTML%3D%22%22%2Cr.forEach((e%2Ct)%3D%3E%7Bconst%20n%3Ddocument.createElement(%22div%22)%2Ca%3De.effect%3F.getTiming%3F.().duration%7C%7C%22auto%22%2Cr%3De.effect%3F.getTiming%3F.().iterations%7C%7C1%3Bn.textContent%3D%60%23%24%7Bt%2B1%7D%20%24%7Be.playState%7D%20duration%3A%24%7Ba%7D%20iters%3A%24%7Br%7D%20rate%3A%24%7Be.playbackRate%7D%60%2Co.appendChild(n)%7D)%2Cr.length%7C%7C(o.textContent%3D%22No%20animations%20found%22)%7D%3Bn.append(a(%22Pause%20all%22%2C()%3D%3Er.forEach(e%3D%3Ee.pause())%7C%7Cc())%2Ca(%22Play%20all%22%2C()%3D%3Er.forEach(e%3D%3Ee.play())%7C%7Cc())%2Ca(%22Half%20speed%22%2C()%3D%3Er.forEach(e%3D%3Ee.playbackRate%3D.5)%7C%7Cc())%2Ca(%22Normal%20speed%22%2C()%3D%3Er.forEach(e%3D%3Ee.playbackRate%3D1)%7C%7Cc()))%2Ct.append(n%2Co)%2Cdocument.body.appendChild(t)%2Cc()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Falejandrogiga98%2FA11y-Bookmarklets%5CnBookmarklet%20name%3A%20Motion%20inspector%5CnAuthor%3A%20alejandrogiga98%5CnLicense%3A%20MIT%20License%5Cn%22)%7Dcatch(e)%7Balert(%22Bookmarklet%20Error%3A%20%22%2Be.message)%7D%7D()%3B
← Back to all bookmarklets