Simplify Animate on Scroll
Creating a JavaScript plugin that animates elements on scroll once appears on screen can enhance user experience by adding dynamic visual effects as users navigate through a webpage. This article will guide you through the essential steps to develop such a plugin, focusing on performance, ease of use, and flexibility.
How it Works
Before diving into the code, it’s important to understand how scroll animations work. At its core, a scroll animation triggers visual changes to elements based on the user’s scroll position. This can be accomplished using JavaScript’s scroll event listener, which detects when an element enters the viewport.
- Viewport Detection: To animate elements when they appear on screen, you need to determine their visibility within the viewport. This can be achieved using the Intersection Observer API or by calculating element positions manually.
- Animation Techniques: CSS animations and transitions are commonly used to create effects like fading, sliding, or zooming in elements. By combining these with JavaScript, you can create smooth and engaging animations.
- Performance Considerations: Animating on scroll can lead to performance issues if not handled properly. It’s crucial to debounce or throttle scroll events and use CSS animations instead of JavaScript for smoother performance.
<div class="ss-element" data-delay="20" data-ss="bounce"></div>
<div class="ss-element" data-delay="20" data-ss="flash"></div>
<div class="ss-element" data-delay="20" data-ss="rubberBand"></div>
<div class="ss-element" data-delay="20" data-ss="swing"></div>
<div class="ss-element" data-delay="20" data-ss="fadeInRight"></div>
<div class="ss-element" data-delay="20" data-ss="fadeInLeft"></div>
<div class="ss-element" data-delay="20" data-ss="fadeInTopLeft"></div>
<div class="ss-element" data-delay="20" data-ss="fadeInTopRight"></div>
<div class="ss-element" data-delay="20" data-ss="flipInX"></div>
<div class="ss-element" data-delay="20" data-ss="zoomIn"></div>
<div class="ss-element" data-delay="20" data-ss="zoomInUp"></div>
<div class="ss-element" data-delay="20" data-ss="slideInDown"></div>
<div class="ss-element" data-delay="20" data-ss="slideInDown"></div>
<div class="ss-element" data-delay="20" data-ss="slideInDown"></div>
Javascript Code
// put document.addEventListener('DOMContentLoaded', () => {
const animateElements = document.querySelectorAll('.ss-element');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const animationObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const element = entry.target;
const delay = parseInt(element.getAttribute('data-delay'), 10) || 100;
const animationType = element.getAttribute('data-ss');
if (entry.isIntersecting) {
// Only add the animation if it's not already animated
if (!element.classList.contains('animate__animated')) {
setTimeout(() => {
if (animationType) {
element.classList.add('animate__animated', `animate__${animationType}`);
}
}, delay);
}
} else {
// Optionally, keep the animation classes for a smooth exit
// To allow for potential re-animation, you might not want to remove classes here
// Uncomment the next line if you want to remove animation classes on exit
// element.classList.remove('animate__animated', `animate__${animationType}`);
}
});
}, observerOptions);
// Fallback for browsers that don't support Intersection Observer
if (!('IntersectionObserver' in window)) {
animateElements.forEach(element => {
const animationType = element.getAttribute('data-ss');
if (animationType) {
element.classList.add('animate__animated', `animate__${animationType}`);
}
});
} else {
animateElements.forEach(element => {
animationObserver.observe(element);
});
}
// });
In above code we have used intersection observer to observe each element if that comes on screen viewport then we are adding class animate_animated and the animation effect is readed by the data attribute data-ss like fadeIn, fadeOut, you can diractly copy paste the class name from animate.css after animate (animate__fadeIn) fadeIn
You can add all the effect from animate.css we are using animate.css to animate the elements, you can esily download it from https://animate.style/