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?
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
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.
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.
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)
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.
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.
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.
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.
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 ;)
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]
29 comments
[ 4.2 ms ] story [ 58.4 ms ] threadEdit: if the body has class="no-sda", it uses a js fallback.
and how do I know if I'm hitting the fallback?
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?
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
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.
[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
[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/