How to Inspect CSS scroll-timeline and Scroll-Driven Animations in Safari Web Inspector

Scroll-driven animations link the progress of CSS transitions and keyframes directly to the scroll position of a scroll container or the visibility of an element within a scrollport. Standardised in the CSS Scroll-Driven Animations specification, properties such as scroll-timeline, view-timeline, and animation-timeline replace heavy JavaScript scroll listeners (such as window.onscroll) with hardware-accelerated animations running on the compositor thread. Safari Web Inspector includes specialised debugging capabilities to inspect timeline progress, verify scroll containers, and diagnose scroll-linked layouts.

Understanding scroll-timeline vs view-timeline

The CSS specification distinguishes between scroll progress across a container versus element visibility:

• scroll-timeline: Binds animation progress from 0% to 100% based on the scroll position of a specified scroll container between its minimum and maximum scroll extents (e.g., reading progress bars).
• view-timeline: Binds animation progress to the relative position of an element as it enters, crosses, and exits the visible scrollport (e.g., reveal-on-scroll card effects).
• animation-range: Declares the start and end offsets within the timeline (such as entry 0% to cover 100%).

Implementing a Scroll Progress Bar and Reveal Effect

Here is a modern CSS implementation defining a reading progress indicator and an image zoom effect:

/* 1. Define reading progress bar tied to root scroll */
@keyframes grow-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #0071e3;
    transform-origin: left;
    
    /* Bind animation to root document scroll timeline */
    animation: grow-progress auto linear;
    animation-timeline: scroll(root block);
}

/* 2. Define element reveal animation tied to view timeline */
@keyframes reveal-card {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.feature-card {
    view-timeline-name: --card-timeline;
    view-timeline-axis: block;
    
    animation: reveal-card both linear;
    animation-timeline: --card-timeline;
    animation-range: entry 20% cover 40%;
}

Inspecting Scroll Timelines in Safari Web Inspector

Follow these steps to inspect scroll-driven animation behaviours inside Safari:

1. Open Safari, navigate to your webpage, and open Web Inspector via Option+Command+I.
2. In the Elements tab, select the element featuring the scroll-driven animation (e.g., .reading-progress-bar).
3. Inspect the Styles panel. Verify that animation-timeline: scroll(root block) is recognized as a valid property without syntax warnings.
4. Select an element with a named view-timeline-name. Confirm that the custom ident (--card-timeline) matches the corresponding animation-timeline declaration.
5. Open the Timelines tab and enable Rendering & Painting.
6. Scroll the document up and down. Confirm that the animation transforms execute on the compositor thread without triggering continuous style recalculation or CPU reflow spikes.

Troubleshooting Common Scroll Animation Pitfalls

• Missing Overflow Property: If a custom scroll container does not declare overflow: auto or overflow: scroll, the scroll timeline fails to instantiate.
• Containment Issues: Applying contain: paint or overflow: hidden to an intermediate parent container can clip the visibility calculations required by view-timeline.
• Prefixes and Fallbacks: Ensure non-supporting browsers degrade gracefully by ensuring content remains visible when animations do not run.