demo · v144

Scroll Trigger

Scroll inside the panel. Each card is animated only when it enters the viewport. Pick a keyframe set from the dropdown to swap the entry effect. Chrome 144 ships animation-trigger; the fallback uses IntersectionObserver so the demo runs everywhere.

animation-trigger CSS: checking…
scroll down ↓
card 1
card 2
card 3
card 4
card 5
card 6
end

the API

.card {
  animation: slide-in 500ms;
  animation-trigger: scroll-enter root 80%;   /* Chrome 144 */
}

see also