21–30 of 63 posts
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)
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!
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…
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.
Love the one-variable design where scale and translate stay in sync automatically, just wish Firefox would get off the flag already.
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)
Android Firefox: there is no background image.
Idk about anyone here but I find the effect disorienting.
That sounds interesting but it would be a whole lot more interesting if the page was itself an example of said effect!