The Basic Animation

The main image in the slideshow is just a background-image on a div. The background-size property is set to 120% to make sure that the image is always a little larger than the screen and therefore always has room to scroll across the screen.

To animate the background image, a keyframes at-rule is used. The rule lists out the different steps of the animation and when they should occur during the run time of the animation.

Since the main image is a background image, I was able to animate it across the screen with the background-position property, which conveniently allows the simple values left and right. When I add in the fading in and out of the image, the full CSS animation for the background looks like this:

@keyframes moveBackgroundImageFromLeftToRightWithFade {
	from {
		opacity: 0;
		background-position: left;
	}
	15% {
		opacity: 1;
	}
	85% {
		opacity: 1;
	}
	to {
		opacity: 0;
		background-position: right;
	}
}

The animation is added to the element with the background image using different animation properties.

.mainImage {
	animation-duration: 12s;
	animation-timing-function: linear; /* Ensures smooth movement across the screen*/
	animation-iteration-count: infinite; /* Makes animation go forever */
	animation-direction: alternate;
	animation-name: moveBackgroundImageFromLeftToRightWithFade;

	/* Or all as one property */
	animation: 12s linear infinite alternate  moveBackgroundImageFromLeftToRightWithFade;
}

An important property to note is the animation-direction property, which is given a value of alternate. This nifty little property removes the need to create a near duplicate rightToLeft keyframes rule. With alternate, the animation first goes through the keyframes rule in order and then goes through in reverse order during the next iteration and then forwards again and so on.

Moving Through Multiple Images

Originally to move through multiple images, I thought I was going to have to write some gross code with setInterval, but as it turns out there are JavaScript events that hook into the animation lifecycle. These events make this task much easier. For this project, I used the animationiteration event, which fires every time the animation iterates (excluding before the first animation iteration starts and after the last animation iteration ends).

Using this event, my component changes the URL of the background image every time the animation iterates.

// screens is a list of remote image URLs
const NetflixScreenSaver = ({ screens }: { screens: string[] }) => {
	const [currentScreen, setCurrentScreen] = setState(0);

	const handleAnimationIteration = () => {
		setCurrentScreen((prev) => (prev + 1) % screens.length);
	}

	return (
		<div 
			className="mainImage"
			style={{ backgroundImage: `url(${screens[currentScreen]})`}}
			onAnimationIteration={handleAnimationIteration}
		/>
	);
}

The combination of the CSS Animation and the animationiteration event finishes the main functionality of the screen.

Adding the Text

From here, we just need to add the text on the screen along with the list of attributes. This is done easily by absolutely positioning a p and ul element at the bottom left of the screen. The text also fades in a little bit after the image does so I created a separate keyframes rule to animate the opacity of the text content.

An interesting feature of the text that I noticed was that there is a mild gradient behind the text. Since the background image could be light and our text is white, a dark gradient behind the text ensures that the text is not hard for users to read.

<div className="mainImage">
	<div className="content">...</div>
	<div className="gradient" />
</div>

<style>
	.gradient {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50%;
		background: linear-gradient(to top, black, transparent);
	}
</style>

The linear-gradient value just creates a gradient from the bottom of the element to the top starting with black at the bottom which fades to transparency half way up the screen.

Just like that we have our text and the content of the component is finished!

.mainImage {
	container-type: inline-size;
}

/* Class for the main text of the slideshow */
.title {
	font-size: 40px;
}

@container (width > 600px) {
    .title {
        font-size: 55px;
    }
}

@container (width > 1000px) {
    .title {
        font-size: 70px;
    }
}

A Final Touch

Since this screen saver is meant to display images over a whole screen, I’m going to assume that these images are going to be pretty large. With large image sizes they are going to make a moment to download over the internet and I want to avoid images slowly loading in while the screen is up.

To prevent this, I decided to preload images before they show up. Images can be programmatically preloaded by creating an image object with the URL.

const preloadImage = (src: string) => {
	return new Promise((resolve, reject) => {
		const image = new Image();
		image.onload = resolve;
		image.onerror = reject;
		image.src = src;
	})
}

When the component first loads, the preloadImage function is called for both the first image and the second image with a useEffect hook. To stop the animation from starting right away, I also added another useState to track when the images are loading in. When the loading is occurring, the animation-play-state CSS property is set to paused on the main image (and the text!) so that the animation does not start until the images are ready.

const NetflixScreenSaver = ({ screens }: { screens: string[] }) => {
	const [preloading, setPreloading] = useState(true);
	
	useEffect(() => {
		(async () => {
			const imagesToPreload = screens.slice(0, 2);
			await Promise.all(
				imagesToPreload.map((url) => preloadImage(url))
			);
			setPreloading(false);
		})();
	}, []);

	return (
		<div 
			className="mainImage" 
			style={{ animationPlayState: preloading ? 'paused' : 'running' }}
		>			
			...
		</div>
	);
}

This takes care of the first two images. Then every time an animation iteration completes, we can load the image after the next image so that everything is loaded into memory by the time that image is needed.

const handleAnimationIteration = () => {
	const imageAfterNext = (currentScreen + 2) % screens.length;
	preloadImage(screens[imageAfterNext]);
	// no need to await this and hold up everything, we can just
	// add this to the event loop and let it run when the browser
	// has time since our animation takes so long
}

With that the component avoids half loaded images stalling the animation.