Scrubbing Timelines in the Firefox Animations Panel

This article provides a complete guide on how web developers can use the Firefox Developer Tools Animations panel to inspect and manually scrub through CSS transitions and Web Animations API (WAAPI) timelines. It covers how to access the tool, how the unified timeline captures different animation types, and the exact mechanics of dragging the scrubber to debug frame-by-frame property changes.

Accessing the Animations Panel

To scrub through animations, you first need to open the tool and trigger the animations you want to inspect.

  1. Open Firefox and navigate to the webpage containing the animations.
  2. Open Developer Tools by pressing F12 (or Ctrl+Shift+I on Windows/Linux, Cmd+Option+I on macOS).
  3. Select the Inspector tab.
  4. In the secondary pane (usually on the right or bottom), click on the Animations tab.
  5. Select the <body> element in the DOM tree to capture all active animations on the page, or select a specific DOM node to isolate its animations.

How the Unified Timeline Works

Firefox automatically detects and groups CSS transitions, CSS @keyframes animations, and JavaScript-driven Web Animations API instances into a single, synchronized timeline.

Each animation is displayed as a horizontal bar plotted against a millisecond time scale at the top of the panel. Firefox distinguishes the animation types using distinct labels and colors:

  • CSS Transitions are labeled with the Transition prefix and represent implicit state changes.
  • Web Animations API timelines are labeled with either the Script prefix or their assigned id property from JavaScript.

Because both types share the same time scale, you can scrub through a CSS transition and a WAAPI animation simultaneously to verify their synchronization.

Scrubbing the Timeline

The scrubbing mechanism allows you to override the browser's active animation clock and manually control the playback head.

  • Locate the Scrubber: At the top of the Animations panel, directly inside the millisecond ruler, there is a vertical line with a handle at the top. This is the scrubber (or playhead).
  • Click and Drag: Click anywhere on the time scale ruler or grab the scrubber handle directly. Drag it left to rewind or right to advance the animation.
  • Real-Time Viewport Updates: As you drag the scrubber, Firefox immediately updates the DOM elements in the main browser viewport to reflect their exact state at that specific millisecond.
  • Automatic Pausing: Grabbing the scrubber automatically pauses the timeline playback, allowing you to hold the animation on a single frame indefinitely.

Granular Scrubbing Controls

When dealing with fast CSS transitions or complex WAAPI sequences, dragging the scrubber at normal speed can feel imprecise. Firefox provides two features to assist with fine-tuning:

  1. Playback Rate Multiplier: In the toolbar at the top of the Animations panel, there is a dropdown menu set to 1x by default. Changing this to 0.1x or 0.5x slows down the playback and expands the effective precision you have when observing the timeline before pausing to scrub.
  2. Animated Property Inspection: Clicking on an individual animation bar in the main timeline opens a detailed view at the bottom of the panel. This view plots the specific CSS properties being manipulated (such as opacity or transform) along a curve based on the easing function. As you drag the main scrubber, a secondary vertical indicator moves across these property curves, showing you the exact calculated value of the CSS property at that precise moment in the timeline.

Handling Finite vs. Infinite Animations

When scrubbing, CSS transitions typically have a short, finite duration. Once a transition finishes, it may disappear from the active listener if triggered by a pseudo-class like :hover.

To scrub a :hover CSS transition effectively:

  1. Select the element in the Inspector.
  2. Click the :hov button in the Rules panel and check the :hover box to force the state.
  3. The transition will record in the Animations panel.
  4. You can now use the scrubber to move back and forth through the transition without needing to keep your mouse cursor over the element in the viewport.

For Web Animations API timelines that use iterations: Infinity, the Animations panel displays a repeating pattern on the timeline bar. Scrubbing works within the bounds of the captured iteration blocks displayed on the screen.