Casually dropping this here before I start my weekend … 👋

#ScrollDrivenAnimations #DevTools #WIP

https://www.youtube.com/watch?v=UszGZofQrpw

In this post I share how you can (ab)use Scroll-Driven Animations to fake a `:snapped` selector – a fictitious selector that matches elements that are currently snapped within their scroll-snapping enabled ancestor scroller.

CSS IS FUN, YO! 🤩

🔗 https://brm.us/snapped

🏷️ #CSS #ScrollDrivenAnimations #ScrollSnapping

Tweaked the View Progress Timeline Ranges and Animation Progress Visualizer a little bit.

It now persists your chosen settings in the URL (meaning you can share it) and also shows the resulting CSS output.

https://scroll-driven-animations.style/tools/view-timeline/ranges/#range-start-name=entry&range-start-percentage=25&range-end-name=contain&range-end-percentage=50&view-timeline-axis=block&view-timeline-inset=0&subject-size=smaller&subject-animation=scale-up&interactivity=clicktodrag&show-areas=yes&show-fromto=yes&show-labels=yes

#CSS #ScrollDrivenAnimations

Introducing scroll-driven-animations.style, a website I built to support the launch of Scroll-Driven Animations in Chrome 115.

🔗 https://bram.us/2023/06/13/introducing-scroll-driven-animations-style/

🏷️ #CSS #ScrollDrivenAnimations #Animations

Y'all are ready for this? I almost am!

#CSSDay #ViewTransitions #ScrollDrivenAnimations #CSS