AllTips(154)

CSS scroll-driven animation

Name: CSS scroll-driven animation
Uploaded: 2024-01-15T19:05:24+08:00
Channel: Arbaoui Mehdi
Description: Like JS's `IntersectionObserver`, using CSS to track elements crossing the ScrollPort and applying `blurFadeIn` animation.

Next Tip

GitHub Repo https://github.com/Front-Tips/css-scroll-driven-animation
CSS scroll-driven animations https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
animation-range CSS MDN Reference https://developer.mozilla.org/en-US/docs/Web/CSS/animation-range
view() CSS MDN reference https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline/view
Can I Use view() https://caniuse.com/?search=view()