Version selector

This demo has several versions:

  1. Single set of keyframes
  2. Multiple animations
  3. Single animation with offset info
  4. Multiple animations
🏠

About this demo

This demo shows a contact list where the list entries are animated. As a list entry enters the scrollport from the bottom it slides+fades in, and as it exits the scrollport at the top it slides+fades out.

The Code / Explanation

For this demo, each element gets decorated with one View Timeline that tracks the element as it crosses its scrollport yet two scroll-driven animations are attached to it. The animate-in animation is attached to the entry range of the timeline, and the animate-out animation to the exit range of the timeline.

@keyframes animate-in {
	0% { opacity: 0; transform: translateY(100%); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
	animation: animate-in linear forwards,
				animate-out linear forwards;
	animation-timeline: view();
	animation-range: entry, exit;
}

Also see the alternative version that has one single set of keyframes with range information attached.

⚠️ Your browser does not support Scroll-driven Animations. Please use Chrome 115 or newer.