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

The position of each list item is tracked using a ViewTimeline.

document.querySelectorAll('#list-view li').forEach($li => {

	// Create a ViewTimeline to track the li in its scroller.
	const timeline = new ViewTimeline({
		subject: $li,
		axis: 'block',
	});

	…
}

This ViewTimeline is used as the timeline for both animations. However, the animate-in animation is attached to the entry range, and the animate-out animation to the exit range of the timeline.

// Animate in
$li.animate({
	opacity: [ 0, 1 ],
	transform: [ 'translateY(100%)', 'translateY(0)'],
}, {
	fill: 'forwards',
	timeline,
	rangeStart: 'entry 0%',
	rangeEnd: 'entry 100%',

});

// Animate out
$li.animate({
	opacity: [ 1, 0 ],
	transform: [ 'translateY(0)', 'translateY(-100%)'],
}, {
	fill: 'forwards',
	timeline,
	rangeStart: 'exit 0%',
	rangeEnd: 'exit 100%',

});

To prevent collisions between the animations, the fill mode of each one is set to forwards.

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