Physics-Based CSS Animations in Blink's Compositor
Blink28624 Okt 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.

Avsnitt(497)

cc::PropertyTrees

cc::PropertyTrees

(TransformTree / ClipTree / EffectTree / ScrollTree) with nodes cc::TransformNode / ClipNode / EffectNode / ScrollNode — The impl‑side property‑tree state that positions, clips, blends, and scrolls co...

22 Sep 202534min

cc::LayerTreeHostImpl

cc::LayerTreeHostImpl

The compositor‑thread twin that owns the active/pending trees, runs impl‑side animations/scroll, and prepares draw. Implements cc::InputHandler for threaded scrolling/pinch.

22 Sep 202546min

main —> impl cc::LayerTreeHost

main —> impl cc::LayerTreeHost

Packages updated layers/property trees; kicks a commit to the compositor thread (via the proxy).

22 Sep 202536min

blink::PropertyTreeManager

blink::PropertyTreeManager

Bridges Blink’s paint property trees into cc property trees: creates/updates cc TransformNode, ClipNode, EffectNode, and ScrollNode (including inner/outer viewport scroll nodes).

22 Sep 202539min

blink::PaintArtifactCompositor

blink::PaintArtifactCompositor

Decides what needs to be composited and prepares the main‑thread representation to feed cc (layers if needed, scrollbar compositing, etc.).

22 Sep 202542min

blink::PaintArtifact

blink::PaintArtifact

The immutable package of paint chunks + display items for this frame, used to drive compositing without re‑painting.

21 Sep 202536min

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 Sep 202541min

blink::PaintController

blink::PaintController

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

21 Sep 202533min

Populärt inom Teknik

natets-morka-sida
uppgang-och-fall
elbilsveckan
rss-technokratin
bilar-med-sladd
skogsforum-podcast
market-makers
har-vi-akt-till-mars-an
bli-saker-podden
rss-elektrikerpodden
rss-laddstationen-med-elbilen-i-sverige
rss-powerboat-sverige-podcast
rss-it-sakerhetspodden
rss-veckans-ai
rss-uppgang-och-fall
rss-fabriken-2
rss-snacka-om-ai
developers-mer-an-bara-kod
hej-bruksbil
dom-kallar-oss-krypto