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

Animating HTML elements along complex curved geometries (such as bezier curves, circles, or custom vector shapes) historically required heavy JavaScript animation libraries (like GSAP or requestAnimationFrame loops) that performed continuous style recalculations on the CPU thread. The CSS Motion Path Module Level 1 specification introduces hardware-accelerated motion paths directly into CSS via properties like offset-path, offset-distance, and offset-rotate. Safari Web Inspector provides specialized path preview and animation timeline controls to inspect and fine-tune motion path trajectories.

Understanding CSS Motion Path Properties

Motion path animations govern how elements traverse a defined spatial curve:

• offset-path: path(...): Defines the mathematical vector trajectory using SVG path syntax (e.g., path("M 20 200 C 100 0, 300 400, 400 200")) or basic shapes like circle() or rect().
• offset-distance: Specifies the linear progress along the path from 0% (path origin) to 100% (path destination).
• offset-rotate: Controls element orientation along the curve. auto aligns the element tangentially to the path gradient; specifying an angle (e.g., auto 90deg) offsets the orientation relative to the trajectory.
• offset-anchor: Sets the element’s transformation origin point that locks onto the path coordinate.

Implementing a Hardware-Accelerated Motion Path in CSS

Here is a complete CSS implementation animating a marker element along a cubic bezier curve:

/* 1. Define motion path trajectory */
.motion-stage {
    position: relative;
    width: 600px;
    height: 400px;
    background: #f8fafc;
    border-radius: 16px;
}

.animated-marker {
    width: 32px;
    height: 32px;
    background: #0071e3;
    border-radius: 50%;
    
    /* Define SVG vector path */
    offset-path: path("M 50 300 C 150 50, 450 50, 550 300");
    offset-rotate: auto;
    offset-anchor: center center;
    
    /* Animate offset-distance */
    animation: follow-curve 4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes follow-curve {
    0% {
        offset-distance: 0%;
        transform: scale(0.8);
    }
    100% {
        offset-distance: 100%;
        transform: scale(1.2);
    }
}

Inspecting Motion Paths in Safari Web Inspector

Follow these steps to inspect the path geometry and timing in Safari on macOS:

1. Open Safari, navigate to your webpage, and open Web Inspector via Option+Command+I.
2. In the Elements DOM tree, select the element declared with offset-path (e.g., .animated-marker).
3. In the Styles panel, locate the offset-path declaration. Notice the small path icon adjacent to the path("...") string.
4. Click the path icon; Safari Web Inspector highlights the vector path directly on the page viewport as an overlay, displaying control handles and curve anchors.
5. Navigate to the Timelines tab and enable Rendering & Painting.
6. Record a timeline session while the animation plays. Verify that Safari renders the animation entirely on the compositor thread with 0ms script execution overhead.
7. Inspect the Animations tool in Web Inspector to pause, scrub, and adjust the cubic-bezier easing curve interactively.

Best Practices and Performance Considerations

• Keep Paths Scalable: Use percentage coordinates or wrap SVG trajectories inside an svg element to ensure motion paths scale responsively across mobile viewports.
• Hardware Acceleration: Animate only offset-distance, transform, and opacity to prevent triggering full CPU layout recalculations during motion transitions.
• Accessibility Compliance: Enclose continuous motion path animations in @media (prefers-reduced-motion: reduce) to present a static endpoint for users sensitive to vestibular motion.