How to Inspect CSS offset-path and Motion Path Animations in Safari Web Inspector

Traditionally, animating DOM elements along intricate curved trajectories—such as arcs, circles, or custom Bézier vector curves—demanded complex JavaScript coordinate recalculations using requestAnimationFrame or heavy external animation frameworks. CSS Motion Path Module Level 1 introduces native declarative trajectory animations via offset-path, offset-distance, and offset-rotate. In Safari Web Inspector, developers can inspect active motion paths, debug orientation tangents, and verify GPU-accelerated compositor animation execution.

Understanding CSS Motion Path Properties

CSS Motion Path decouples animation timing from coordinate geometry using dedicated offset properties:

• offset-path: Defines the physical geometric trajectory. Accepts SVG path strings (path("M ...")), coordinate shapes (circle(), ellipse()), or references to external SVG path geometry.
• offset-distance: Specifies the element’s position along the path as a percentage (from 0% at the start to 100% at the end) or absolute length. Animating offset-distance glides the element along the curve.
• offset-rotate: Governs the element’s rotation angle relative to the path’s tangent line:
  • auto: Automatically rotates the element to face the forward direction of motion.
  • auto 90deg: Rotates the element tangent to the path with a fixed 90-degree offset.
  • 0deg / none: Keeps the element fixed upright regardless of path curvature.
• offset-anchor: Sets the internal transformation origin of the moving element (defaulting to auto, which uses transform-origin).

Configuring Safari Web Inspector for Motion Path Inspection

To inspect motion path animations in Safari:

1. Open Safari and launch Web Inspector by pressing Option + Command + I.
2. Select the Elements tab.
3. Select your animated marker, icon, or particle element in the DOM tree.
4. In the right sidebar, switch to the Styles panel.
5. Select the Timelines tab in Web Inspector to evaluate frame-rate performance.

Inspecting Motion Path Declarations in Practice

Review the CSS implementation animating a rocket icon along an orbital curve:

/* Moving particle following SVG curved trajectory */
.orbit-marker {
  width: 32px;
  height: 32px;
  background-color: #2563eb;
  border-radius: 50%;
  offset-path: path("M 20 200 C 100 0, 300 0, 380 200 S 660 400, 740 200");
  offset-rotate: auto;
  animation: travel-orbit 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes travel-orbit {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

Inside Safari Web Inspector:

1. Select .orbit-marker in the DOM tree.
2. In the Styles panel, verify that offset-path and offset-rotate: auto; are active without warnings.
3. In Web Inspector, hover over the path(...) string in the Styles panel:
   • Safari displays an on-screen visual overlay illustrating the physical Bézier curve directly in the browser viewport.
4. Temporarily pause or scrub the animation using the Timelines > Animations inspection controls to observe the element at exact percentage intervals.
5. Switch to the Computed panel to verify that the element’s transformation matrix recalculates smoothly across every frame.

Diagnosing Orientation and Distortion Issues

When elements appear distorted or misaligned along the trajectory:

• Inverted Orientation: If an icon travels backwards along the curve, add a 180-degree offset: offset-rotate: auto 180deg;.
• Anchor Offset Disparities: If the element’s edge rather than its centre tracks the curve, declare offset-anchor: center center; to lock the trajectory directly to the element’s geometric midpoint.
• Compositor Acceleration: Confirm in the Timelines recording that the animation runs on the hardware compositor thread, ensuring smooth 120Hz playback on Apple ProMotion displays.

Validating Progressive Enhancement Fallbacks

Ensure that older browsers lacking motion path support still display the element legibly at its default position:

@supports (offset-path: path("M 0 0")) {
  .orbit-marker {
    offset-path: path("M 20 200 C 100 0, 300 0, 380 200");
    animation: travel-orbit 4s infinite;
  }
}

Safari Web Inspector allows rapid testing of these conditions by toggling rules dynamically in the Styles panel, ensuring polished motion graphics execution across all Apple devices.