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.
CSS-Native Parallax Effect
31–40 of 63 posts
Re: CSS-Native Parallax Effect
#32Re: CSS-Native Parallax Effect
#33A 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
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.
Re: CSS-Native Parallax Effect
#34Earlier quoted context omitted.
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
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.
Yes... there's a media query in the codepen disabling animation for people with reduced motion enabled.
Re: CSS-Native Parallax Effect
#35could this be combined with a sprite like image that shows a slightly different angle of the image with each step
Re: CSS-Native Parallax Effect
#36Great. 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.
Re: CSS-Native Parallax Effect
#37[flagged]
Re: CSS-Native Parallax Effect
#38This [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
Re: CSS-Native Parallax Effect
#39Hey, where's the demo?
Re: CSS-Native Parallax Effect
#40That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
Or even linked to one!