Day 6 | 50 Projects in 50 Days

Scroll Animation

This project was about adding simple animations that trigger as you scroll down the page. Each box slides in from the side when it reaches a certain point on the screen.

The idea is to check how far each element is from the top of the viewport and then add a class to trigger a CSS animation when it crosses the “trigger point.”

Here’s the logic in simple terms:

1. Detect the user’s scroll position.
2. For each element, compare its position to the viewport height.
3. If it’s visible enough (past the trigger point), add a class to animate it in; if not, remove the class.

In CSS, I used the transform property to shift the elements off-screen initially (for example, translateX(400px)), and then bring them back to their normal position (translateX(0)) when the active class is added.

Also, a fun little CSS discovery: you can use even as a value in nth-of-type() selectors (for example, :nth-of-type(even)), which makes alternating styles cleaner.

For a live demo of the project, click here

To view the code on GitHub, click here

On to Day 7 ⚡