Scroll-triggered Animations & Transitions

Details

• Examples of CSS animations and transitions controlled by IntersectionObserver and animation-timeline.
• The animation-timeline Scroll Fill demo requires no JS, and shows how the effect is controlled by scrolling.
• prefers-reduced-motion is honored and will render the static elements.
• CSS is structured to show how multiple animations can be combined.

Considerations

• animation-timeline is only supported in Chrome, Edge, and Opera, while it's available behind a flag in Firefox.
• For progressive enhancement, animation-timeline Scroll Fill demo could fall back to the Transition Fill demo by sharing CSS and using `if (!CSS.supports('animation-timeline: --works')) {...}` to initialize the IntersectionObserver
• For the Transition Wipe Left demo, CSS Transition is used instead of CSS Animation, due to the latter having challenges with reversing an animation via toggled classes.

Demo

There are ten demos below. One is CSS Animation using animation-timeline, two are CSS Transitions using IntersectionObserver, and seven are CSS Animations using IntersectionObserver.

https://nonsponsored.github.io/scroll-animations-transitions/