Bramusbramus
Apr 8, 2024, 9:35 AMCreating a Scroll-Driven Animation is as easy as taking an existing CSS animation and declaring `animation-timeline: scroll()` on the element.
The function accepts two parameters: a `<scroller>` and an `<axis>`
Replies
- BramusbramusApr 8, 2024, 9:35 AM
The `<scroller>` determines which scroller to track:
- nearest (default) = nearest ancestor scroller
- root = the root scroller
- self = the element’s own scrollerThe `<axis>` determines which axis to track:
- block = the block axis
- inline = the inline axis
- x = the x axis
- y = the y axis(inline and block depend on the writing mode)
- BramusbramusApr 8, 2024, 9:35 AM
Use this tool get a change the values on the fly and see how they affect the box’s animation.
https://scroll-driven-animations.style/tools/scroll-timeline/params/
- BramusbramusApr 8, 2024, 9:36 AM
For many more Scroll-Driven Animation tools and demos, go check out https://scroll-driven-animations.style/, your one-stop shop for all you Scroll-Driven Animation needs!
Axel Rauschmayerrauschma@fosstodon.orgApr 8, 2024, 9:39 AM@bramus I like the icon!