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. One single set of keyframes, with the range information included, is attached to each element.

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

	exit 0% {
		opacity: 1; transform: translateY(0);
	}
	exit 100% {
		opacity: 0; transform: translateY(-100%);
	}
}

#list-view li {
	animation: linear animate-in-and-out;
	animation-timeline: view();
}

Also see the alternative version that has multiple animations attached.

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