upvote
CSS-Native Parallax Effect

(dan-webnotes.com)

101 points

by dandep6 hours ago |
46 comments
upvoteby baliex6 hours ago|
next
[-]
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
reply
upvoteby sourcecodeplz17 minutes ago|
parent|
next
[-]
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.

reply
upvoteby jonahx2 hours ago|
parent|
prev|
next
[-]
Or even linked to one!
reply
upvoteby dsmurrell4 hours ago|
parent|
prev|
next
[-]
I was also looking for examples.
reply
upvoteby yashD184 hours ago|
parent|
prev|
[-]
i was waiting for the effect to show up
reply
upvoteby mpeg6 hours ago|
prev|
next
[-]
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

reply
upvoteby dandep4 hours ago|
parent|
next
[-]
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.

reply
upvoteby semolino1 hours ago|
parent|
prev|
next
[-]
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.
reply
upvoteby som5 hours ago|
parent|
prev|
next
[-]
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)

reply
upvoteby iainmerrick5 hours ago|
parent|
prev|
[-]
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.
reply
upvoteby phelm6 hours ago|
prev|
next
[-]
A demo https://codepen.io/editor/phelm/pen/019e87f5-dfec-7372-9849-...
reply
upvoteby frereubu6 hours ago|
parent|
next
[-]
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
reply
upvoteby frereubu3 hours ago|
parent|
next
[-]
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.
reply
upvoteby cj3 hours ago|
parent|
[-]
Yes... there's a media query in the codepen disabling animation for people with reduced motion enabled.
reply
upvoteby werdnapk5 hours ago|
parent|
prev|
next
[-]
It's been behind a flag for ages. Maybe because of performance issues?
reply
upvoteby goodmythical1 hours ago|
parent|
[-]
Enabling (layout.css.scroll-driven-animations.enabled) and refreshing the codepen gives a "we crashed this to prevent a crash from an infinite loop" clicking to allow the infinite loops allowed me to see the animation.

Fedora 44 Kernel: x86_64 Linux 7.0.10-201.fc44.x86_64 Firefox 151.0.2

reply
upvoteby anssip6 hours ago|
parent|
prev|
next
[-]
Noticed the same thing. In Mac Safari it works without setting any flags.
reply
upvoteby wnevets5 hours ago|
parent|
prev|
next
[-]
Doesnt work on any browser for me
reply
upvoteby 3 hours ago|
parent|
[-]
deleted
reply
upvoteby WithinReason5 hours ago|
parent|
prev|
[-]
tried 4 browsers, didn't work in any of them
reply
upvoteby alpinisme5 hours ago|
parent|
[-]
FWIW it works on iPhone safari
reply
upvoteby deckar011 hours ago|
parent|
next
[-]
But it jumps around and flickers pretty bad. Chrome’s own demos in the docs don’t work at all.

https://developer.chrome.com/docs/css-ui/scroll-driven-anima...

Edit: Their reference works and has some really nice demos. Must be an iframe problem. https://scroll-driven-animations.style/#demos

reply
upvoteby layer84 hours ago|
parent|
prev|
next
[-]
Only on iOS 26.
reply
upvoteby abejfehr4 hours ago|
parent|
prev|
[-]
I don’t think it did for me. Are you on iOS 26?
reply
upvoteby Mashimo5 hours ago|
parent|
prev|
next
[-]
Only worked for me on mobile (vivaldi android) not on vivaldi / chrome / edge on Desktop.
reply
upvoteby account425 hours ago|
parent|
prev|
[-]
What an age where we need a pile of javascript as well as a bot check to demo a simple CSS trick.
reply
upvoteby zamadatix5 hours ago|
parent|
[-]
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.
reply
upvoteby sheept1 hours ago|
prev|
next
[-]
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/

reply
upvoteby thomasikzelf5 hours ago|
prev|
next
[-]
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)
reply
upvoteby apsurd31 minutes ago|
parent|
next
[-]
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.

reply
upvoteby rsyring5 hours ago|
parent|
prev|
[-]
Android Firefox: there is no background image.
reply
upvoteby thomasikzelf4 hours ago|
parent|
[-]
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.
reply
upvoteby Semaphor3 hours ago|
prev|
next
[-]
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

reply
upvoteby mrcsmcln4 hours ago|
prev|
next
[-]
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.
reply
upvoteby sillyboi5 hours ago|
prev|
next
[-]
It would be awesome to put an interactive example right in the article.
reply
upvoteby Onplana1 hours ago|
prev|
next
[-]
I was expecting a demo on the linked page itself. Interesting to let Codex or Claude Code do it :)
reply
upvoteby geuis1 hours ago|
prev|
next
[-]
Using css perspective for parallax has been around for years and is much simpler code.
reply
upvoteby thecaio2 hours ago|
prev|
next
[-]
there is a special place in hell for pages like these that don't show examples
reply
upvoteby rohitsriram5 hours ago|
prev|
next
[-]
Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
reply
upvoteby dandep4 hours ago|
parent|
[-]
Thanks!
reply
upvoteby hit8run1 hours ago|
prev|
next
[-]
I get motion sickness from this specific effect. Especially on high refresh rate screens.
reply
upvoteby duskdozer5 hours ago|
prev|
next
[-]
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.
reply
upvoteby albert_e3 hours ago|
prev|
next
[-]
could this be combined with a sprite like image that shows a slightly different angle of the image with each step
reply
upvoteby tantalor2 hours ago|
prev|
next
[-]
Hey, where's the demo?
reply
upvoteby i_am_a_peasant4 hours ago|
prev|
next
[-]
Idk about anyone here but I find the effect disorienting.
reply
upvoteby amon_spek4 hours ago|
parent|
[-]
Yes. I'm a little more sensitive than average, but not enough to turn off animations, and this is uncomfortable.
reply
upvoteby Theodores3 hours ago|
prev|
next
[-]
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.
reply
upvoteby xuzhenpeng5 hours ago|
prev|
next
[-]
[flagged]
reply
upvoteby swordlucky6663 hours ago|
prev|
[-]
[dead]
reply