That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
show comments
mpeg
How does this compare to the classic css-native parallax effect? Before the scroll timeline APIs you'd use the "perspective" css property to create a container where the z plane is n pixels away from the screen, and then position each layer within it at a different z distance using transform: translateZ
That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every browser for around a decade
I like the idea of the scroll-timeline though, just keen to understand what the advantage is for this
A parallax effect has also long been possible with CSS 3D transforms. Here's a demo,[0][1] from the same person who made that CSS 3D FPS a while ago.[2]
You can make some really cool stuff with css scroll animations. I used SVG paths with a scroll animated dash offset to draw an image while scrolling. Zero javascript, it feels so smooth. https://thomaswelter.nl (the background)
show comments
Semaphor
This [0] seems to be the main meta bug, with [1] being for CSS and [2] for JS, for FF to ship it without the flag. There seems to be slow work towards it, kinda funny that FF was the first browser to have it (flag-gated, according to CIU) and now is the only one without it in stable ;)
I played around with this API some time ago. It’s simple and high-performance, but one feature I wish existed is damping. Scroll-driven animations are tied directly to the scroll timeline, so there’s no concept of the parallax object “catching up” to the scroll progress over, say, one second. From what I remember, `animation-timing-function` feels weird when you scroll, so it’s not the right solution. GSAP offers this, but it’s JS-only.
sillyboi
It would be awesome to put an interactive example right in the article.
Onplana
I was expecting a demo on the linked page itself.
Interesting to let Codex or Claude Code do it :)
geuis
Using css perspective for parallax has been around for years and is much simpler code.
thecaio
there is a special place in hell for pages like these that don't show examples
rohitsriram
Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
show comments
hit8run
I get motion sickness from this specific effect. Especially on high refresh rate screens.
duskdozer
In a world where it's increasingly overlooked, I'm glad the author mentions disabling it respecting user settings. I do think it should be reversed and only enabled with the `@media (prefers-reduced-motion: no-preference)`, but that is the opinion of someone who gets negative value from animations and is bemused by how much dev and compute time is spent on them.
albert_e
could this be combined with a sprite like image that shows a slightly different angle of the image with each step
tantalor
Hey, where's the demo?
i_am_a_peasant
Idk about anyone here but I find the effect disorienting.
show comments
Theodores
Great. I tried the Google examples a while ago and got nowhere with it, time for another go, within the netherworld of SVG, to map to several different layers.
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
How does this compare to the classic css-native parallax effect? Before the scroll timeline APIs you'd use the "perspective" css property to create a container where the z plane is n pixels away from the screen, and then position each layer within it at a different z distance using transform: translateZ
That method is GPU accelerated too, so it is performant compared to some js solutions, and has worked well in every browser for around a decade
I like the idea of the scroll-timeline though, just keen to understand what the advantage is for this
A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
A parallax effect has also long been possible with CSS 3D transforms. Here's a demo,[0][1] from the same person who made that CSS 3D FPS a while ago.[2]
[0]: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
[1]: blog: https://www.keithclark.co.uk/articles/pure-css-parallax-webs...
[2]: https://www.keithclark.co.uk/labs/css-fps/
You can make some really cool stuff with css scroll animations. I used SVG paths with a scroll animated dash offset to draw an image while scrolling. Zero javascript, it feels so smooth. https://thomaswelter.nl (the background)
This [0] seems to be the main meta bug, with [1] being for CSS and [2] for JS, for FF to ship it without the flag. There seems to be slow work towards it, kinda funny that FF was the first browser to have it (flag-gated, according to CIU) and now is the only one without it in stable ;)
[0]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676779
[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676780
[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=1676781
I played around with this API some time ago. It’s simple and high-performance, but one feature I wish existed is damping. Scroll-driven animations are tied directly to the scroll timeline, so there’s no concept of the parallax object “catching up” to the scroll progress over, say, one second. From what I remember, `animation-timing-function` feels weird when you scroll, so it’s not the right solution. GSAP offers this, but it’s JS-only.
It would be awesome to put an interactive example right in the article.
I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)
Using css perspective for parallax has been around for years and is much simpler code.
there is a special place in hell for pages like these that don't show examples
Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
I get motion sickness from this specific effect. Especially on high refresh rate screens.
In a world where it's increasingly overlooked, I'm glad the author mentions disabling it respecting user settings. I do think it should be reversed and only enabled with the `@media (prefers-reduced-motion: no-preference)`, but that is the opinion of someone who gets negative value from animations and is bemused by how much dev and compute time is spent on them.
could this be combined with a sprite like image that shows a slightly different angle of the image with each step
Hey, where's the demo?
Idk about anyone here but I find the effect disorienting.
Great. I tried the Google examples a while ago and got nowhere with it, time for another go, within the netherworld of SVG, to map to several different layers.