CSS-Native Parallax Effect (opens in new tab)

(dan-webnotes.com)

146 pointsdandep25d ago58 comments

58 comments

45 comments · 18 top-level

phelm25d ago· 9 in thread

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

There's me scrolling up and down and thinking "hey, it's not working!" But it's behind a flag on Firefox: https://caniuse.com/?search=view-timeline-name

frereubu25d ago

For people saying it's not working in any browser - do you have some kind of reduced motion preference setting turned on? I can imagine that would have an effect on something like this and it's definitely working in Chrome for me.

1 more reply

wnevets25d ago

Doesnt work on any browser for me

1 more reply

werdnapk25d ago

It's been behind a flag for ages. Maybe because of performance issues?

1 more reply

anssip25d ago

Noticed the same thing. In Mac Safari it works without setting any flags.

WithinReason25d ago

tried 4 browsers, didn't work in any of them

1 more reply

Mashimo25d ago

Only worked for me on mobile (vivaldi android) not on vivaldi / chrome / edge on Desktop.

account4225d ago

What an age where we need a pile of javascript as well as a bot check to demo a simple CSS trick.

zamadatix25d ago

The JS and bot check are for making additional functionality, beyond just showing the example, work easily. I.e. editing and sharing edits from a browser. If all you want is a static example, feel free to make it without these things.

baliex25d ago· 7 in thread

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

sourcecodeplz24d ago

I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/

Edit: if the body has class="no-sda", it uses a js fallback.

triplelasagna24d ago

I really like the fact that your "recipe" already includes support for prefers-reduced-motion. Parallax can really trigger motion sensitivity issues up to vomiting or several days of bed rest with severe migraine.

You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?

1 more reply

jonahx24d ago

This doesn't do anything, just scrolls like a normal page.

Mac on latest chrome.

2 more replies

yieldcrv24d ago

its beautiful! where can I track the compatibility?

and how do I know if I'm hitting the fallback?

1 more reply

jonahx24d ago

Or even linked to one!

dsmurrell25d ago

I was also looking for examples.

yashD1825d ago

i was waiting for the effect to show up

mpeg25d ago· 5 in thread

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

dandepOP25d ago

OP here, thanks for asking. While the `perspective` technique works too, it has the downside of needing a careful combination of scroller elements and properties.

This approach adds a single class to the image container and that's it. Plus you can control many aspects of the animation such as entry/exit ranges, and make it control other properties like opacity or color, for example.

I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.

semolino24d ago

This method should still support GPU acceleration, as `transform` (or rotate/scale/etc.) is the only property being animated. The benefit of animation-timeline seems to be that it's much easier to set up than a CSS perspective context.

pitched24d ago

When using Z, if the element is close to the bottom of the page, or a very large Z, I found it to increase the length of the scroll bar unexpectedly. Or unexpectedly to me looking for parallax, it would make sense as a normal zoom or scale.

som25d ago

No doubt quite a few folk with the same question. Keen to understand performance tradeoffs.

Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)

iainmerrick25d ago

I was wondering the same thing. That translateZ is a bit fiddly to get right, so I could believe this is a bit easier to use, maybe? And presumably this could be used for other properties besides position, like colors, opacity or blurs.

thomasikzelf25d ago· 3 in thread

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)

rsyring25d ago

Android Firefox: there is no background image.

thomasikzelf25d ago

firefox android does not support CSS animation-timeline, and firefox desktop needs layout.css.scroll-driven-animations.enabled. This probably should not be used for any critical features.

apsurd24d ago

oh that's cool!

Can only see it on chrome though =/. I switched to Safari as the lesser of two data-harvesting evils. Or rather, with an iPhone I've already chosen my overlord. I also switched to Kagi. Trying to deGoogle myself.

i_am_a_peasant25d ago· 2 in thread

Idk about anyone here but I find the effect disorienting.

davidguda24d ago

Slightly disorienting but mostly just gimmicky. Luckily the "scroll down and more stuff than just scroll i going on" trend has mostly faded.

amon_spek25d ago

Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.

rohitsriram25d ago· 1 in thread

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

dandepOP25d ago

Thanks!

sheept24d ago

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/

Semaphor25d ago

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

mrcsmcln25d ago

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.

sillyboi25d ago

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

duskdozer25d ago

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.

tantalor24d ago

Hey, where's the demo?

Theodores25d ago

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.

Onplana24d ago

I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)

hit8run24d ago

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

geuis24d ago

Using css perspective for parallax has been around for years and is much simpler code.

thecaio24d ago

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

albert_e25d ago

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

j / k navigate · click thread line to collapse

58 comments

45 comments · 18 top-level

phelm25d ago· 9 in thread

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

frereubu25d ago

There's me scrolling up and down and thinking "hey, it's not working!" But it's behind a flag on Firefox: https://caniuse.com/?search=view-timeline-name

frereubu25d ago

1 more reply

wnevets25d ago

Doesnt work on any browser for me

1 more reply

werdnapk25d ago

It's been behind a flag for ages. Maybe because of performance issues?

1 more reply

anssip25d ago

Noticed the same thing. In Mac Safari it works without setting any flags.

WithinReason25d ago

tried 4 browsers, didn't work in any of them

1 more reply

Mashimo25d ago

Only worked for me on mobile (vivaldi android) not on vivaldi / chrome / edge on Desktop.

account4225d ago

What an age where we need a pile of javascript as well as a bot check to demo a simple CSS trick.

zamadatix25d ago

baliex25d ago· 7 in thread

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

sourcecodeplz24d ago

I've put together an example here but it doesn't seem to work in Firefox 151.0.2 (64-bit): https://favs.eu.org/parallax/

Edit: if the body has class="no-sda", it uses a js fallback.

triplelasagna24d ago

You did leave that part out of your recipe though. Would you mind adding it there, so that people who copy paste are more inclined to actually keep/use that part as well?

1 more reply

jonahx24d ago

This doesn't do anything, just scrolls like a normal page.

Mac on latest chrome.

2 more replies

yieldcrv24d ago

its beautiful! where can I track the compatibility?

and how do I know if I'm hitting the fallback?

1 more reply

jonahx24d ago

Or even linked to one!

dsmurrell25d ago

I was also looking for examples.

yashD1825d ago

i was waiting for the effect to show up

mpeg25d ago· 5 in thread

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

dandepOP25d ago

OP here, thanks for asking. While the `perspective` technique works too, it has the downside of needing a careful combination of scroller elements and properties.

I know browser support is still lacking, but it will get there eventually. I'm not using this in production code yet, but I think it's useful to experiment with these new CSS APIs.

semolino24d ago

pitched24d ago

som25d ago

No doubt quite a few folk with the same question. Keen to understand performance tradeoffs.

Obvious comparison note would be that the "new" method currently enjoys somewhat limited browser support (no Firefox without a flag, and only since Safari 26)

iainmerrick25d ago

thomasikzelf25d ago· 3 in thread

rsyring25d ago

Android Firefox: there is no background image.

thomasikzelf25d ago

firefox android does not support CSS animation-timeline, and firefox desktop needs layout.css.scroll-driven-animations.enabled. This probably should not be used for any critical features.

apsurd24d ago

oh that's cool!

i_am_a_peasant25d ago· 2 in thread

Idk about anyone here but I find the effect disorienting.

davidguda24d ago

Slightly disorienting but mostly just gimmicky. Luckily the "scroll down and more stuff than just scroll i going on" trend has mostly faded.

amon_spek25d ago

Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.

rohitsriram25d ago· 1 in thread

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

dandepOP25d ago

Thanks!

sheept24d ago

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/

Semaphor25d ago

[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

mrcsmcln25d ago

sillyboi25d ago

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

duskdozer25d ago

tantalor24d ago

Hey, where's the demo?

Theodores25d ago

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.

Onplana24d ago

I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)

hit8run24d ago

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

geuis24d ago

Using css perspective for parallax has been around for years and is much simpler code.

thecaio24d ago

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

albert_e25d ago

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

j / k navigate · click thread line to collapse