Physics-Based CSS Animations in Blink's Compositor
Blink28624 Loka 2025

Physics-Based CSS Animations in Blink's Compositor

The sources provide an extensive overview of the transition from traditional, fixed-curve web animations to more expressive physics-based (spring) animations that mimic real-world motion. They detail the history and specifications of the proposed but unstandardized spring() timing function in CSS, including its parameters like mass and stiffness, which Apple's WebKit implemented experimentally. Furthermore, the documents explore various current alternatives developers use to achieve spring-like effects, such as approximations using linear() and keyframe hacks in CSS or utilizing high-performance, off-main-thread JavaScript libraries and Animation Worklets (part of Houdini). Finally, the text explains the complex implementation challenges within modern browser engines like Blink/Chromium, highlighting the critical need to integrate the physics calculations into the Compositor Thread (cc) for smooth, jank-free performance.

Jaksot(459)

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

The paint property trees captured during painting (transform, clip, effect/opacity, scroll offset) that define visual & coordinate‑space state.

21 Syys 202541min

blink::PaintController

blink::PaintController

Records drawing into a DisplayItemList, segmenting it into PaintChunks keyed by property‑tree state. (Output: a PaintArtifact.)

21 Syys 202533min

blink::LayoutView (root of the layout tree)

blink::LayoutView (root of the layout tree)

Computes geometry for boxes when layout is dirty.

21 Syys 202539min

blink::StyleEngine / style resolver

blink::StyleEngine / style resolver

Recalculates computed styles that changed since last frame (if any).

21 Syys 202542min

blink::Page → blink::LocalFrame / LocalFrameView

blink::Page → blink::LocalFrame / LocalFrameView

The document’s frame & viewport; LocalFrameView is the scrollable root that triggers layout/paint when needed. provided source outlines the fundamental components of the Blink rendering engine, specif...

21 Syys 202539min

blink::WebViewImpl

blink::WebViewImpl

The source text provides an in-depth explanation of the blink::WebViewImpl class within Chromium's Blink rendering engine, characterizing it as the central control point on the renderer's main thread ...

20 Syys 202539min

cc::LayerTreeHost in Chromium's Compositor

cc::LayerTreeHost in Chromium's Compositor

The source provides an extensive technical explanation of the cc::LayerTreeHost class, which acts as the central main-thread component in the Chromium compositor architecture. It details how this comp...

20 Syys 202537min

cc:: Scheduler / SchedulerStateMachine

cc:: Scheduler / SchedulerStateMachine

Drives the frame loop on the compositor thread (BeginFrame → Animate → Commit → Draw), deciding when to ask Blink for a new frame or to draw with existing state.

20 Syys 202548min