CSS-Native Parallax Effect

baliex

That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!

phelm

A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...

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

thomasikzelf

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)

rohitsriram

Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.

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.

sillyboi

It would be awesome to put an interactive example right in the article.

i_am_a_peasant

Idk about anyone here but I find the effect disorienting.

mrcsmcln

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.

albert_e

could this be combined with a sprite like image that shows a slightly different angle of the image with each step

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.

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 ;) [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

tantalor

Hey, where's the demo?

thecaio

there is a special place in hell for pages like these that don't show examples

sheept

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/

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.

hit8run

I get motion sickness from this specific effect. Especially on high refresh rate screens.