Animated On-Scroll List Template
An engaging list where each item smoothly animates into view as it enters the screen.
This "fade and slide up" effect adds a touch of modern dynamism to any list and is triggered by the user's scroll position.
About this Template
This component uses the modern IntersectionObserver JavaScript API to efficiently detect when a list item becomes visible in the browser's viewport. When an item enters the screen, a CSS class is added to trigger a fade-in and slide-up animation. This approach is highly performant because it does not rely on listening to every single scroll event, which can be resource-intensive.
Features
- Performant Scroll Detection: Uses the
IntersectionObserverAPI for efficient visibility tracking without bogging down the main thread. - Smooth CSS Animations: The fade-in and slide-up effects are handled by hardware-accelerated CSS animations for a smooth look.
- Graceful Degradation: On browsers that do not support
IntersectionObserver, the list items will simply appear statically with no animation. - Pure JavaScript: The logic is simple, self-contained, and uses no external libraries.
Code Breakdown
In the CSS, list items are initially set to opacity: 0 and are slightly shifted down using transform: translateY(20px). A transition property is also defined. An .is-visible class is created that sets the opacity to 1 and the transform back to translateY(0).
The JavaScript creates a new IntersectionObserver. The observer's callback function will fire for each element being watched when it crosses a visibility threshold. Inside the callback, we check if the element isIntersecting. If it is, we add the .is-visible class to it, which triggers our CSS transition. We also call observer.unobserve() on the element so the animation only runs once.
Finally, we loop through all the list items and tell our observer to start watching each one using observer.observe(item).
Code
Here's the full code for the template: