Bramus

While re-reading [the thread that sparked scroll-triggered animations](https://github.com/w3c/csswg-drafts/issues/8942), I noticed this question was also covered in that thread. See https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1721492499 and the next few comments. My first interpretation was that...

So, I took Scroll-Triggered Animations for a spin in Chrome Canary with flags and the thing described in the issue right here tripped me up, especially when used with the...

Agenda+’ing to seek a resolution to get the basic use-case detailed above right. I think this means that: - The initial value of `normal` for `` results in `scroll 0%`....

> This is a very specific use-case, and I'd argue it's not the most common one. This is what GSAP ([demo](https://cdpn.io/pen/debug/mdVMOjr)), AOS ([demo](https://michalsnik.github.io/aos/)), and Motion ([demo](https://examples.motion.dev/react/scroll-track-element-in-viewport)) do by default, though....

Another approach is https://github.com/fluorumlabs/css-variable-observer which I found a while ago. It abuses the `font-variation-settings` property because that one can essentially hold `` values (because `` = ``). The property is...

Oh, Jake, that’s the clue I needed! Here, a quick POC: https://codepen.io/bramus/pen/ZEdjjPw/1fa07805a7d6a6ea204decce87ee6705 I’m storing the value in `content`. Because `content` only accepts strings though, the value for `--observed` won’t make...

> Surprised this doesn't work in Safari 18, given that it supports allow-discrete. It‘s debatable because the _computed_ value of `content` doesn’t actually change here; it remains empty. Changing `content`...

Building upon Jake’s suggestion to use `allow-discrete` and the `ccs-variable-observer` library linked before, I built a thing: https://github.com/bramus/style-observer It’s a `MutationObserver` for CSS, powered by CSS Transitions and `transition-behavior: allow-discrete`....

While transforms do typically get updated – e.g. inspect `body > header > img` on https://scroll-driven-animations.style/ – the problem here is that the scroll-driven animation updates custom props which are...

I have filed the following issues at the CSSWG to discuss the points [raised](https://github.com/WebKit/standards-positions/issues/564#issuecomment-3428561660) by @nt1m: - https://github.com/w3c/csswg-drafts/issues/13013 - https://github.com/w3c/csswg-drafts/issues/13014