🎬 Scroll Animations
Smooth animations triggered as you scroll through the page using the Intersection Observer API.
Scroll down to see the magic! ✨
🎨 Staggered Elements
Multiple elements can animate in sequence with staggered delays:
Smooth animations triggered as you scroll through the page using the Intersection Observer API.
Scroll down to see the magic! ✨
Elements fade in and slide from the side as they enter the viewport. This section slides from the left!
Using the modern IntersectionObserver API to detect when elements enter the viewport. No scroll event listeners needed - it's performant and efficient!
This section slides up from the bottom instead of from the side. Different animations for different effects!
This one fades in while scaling up from 80% to 100%. Perfect for emphasizing important content!
Multiple elements can animate in sequence with staggered delays:
Respects prefers-reduced-motion - users who prefer reduced motion will see instant content without animations.
The scroll animations use the IntersectionObserver API to detect when elements enter the viewport. Here's the core implementation:
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
});
const elements = document.querySelectorAll('.hidden');
elements.forEach(el => observer.observe(el));
The threshold determines how much of the element must be visible, and rootMargin creates a buffer zone for triggering the animation.
We use cookies to enhance your browsing experience, analyze site traffic, and personalize content. You can choose which cookies to accept. Learn more about our privacy policy
We use different types of cookies to optimize your experience. You can choose which categories to accept.
Required for the website to function properly. These include security and accessibility features.
Help us understand how visitors interact with our website by collecting and reporting information anonymously.
Used to track visitors across websites to display relevant ads and measure campaign effectiveness.
Remember your settings and preferences like language and region for a personalized experience.