How To Animate Scroll In JavaScript?
A small amount of movement on a website can draw visitors in, make them feel impressed, and grab their attention. You may set them to execute as soon as the page loaded, regardless of where they appear on the page. However, what if it takes the customer some time to scroll down to that element since your website is really lengthy? They might overlook it.
Although they could run continuously, it’s possible that the animation is better suited to show you the start of it. The secret is to employ a technique known as “scroll-triggered animation,” which begins the animation when the user scrolls down to that element.
Scroll triggers come in quite handy. You can implement them using a variety of libraries, such as the well-known ScrollTrigger plugin from Greensock. However, using a third-party library is not required, especially for concepts that are quite straightforward. Actually, you simply need a few pieces of basic JavaScript to create it yourself. In this post, that is what we will do.
This is how our scroll-triggered event will be created
Make a scrollTrigger function that we may use on specific components.
When an element comes into the viewport, apply a.active class to it.
Use CSS to make that.active class animated.
Sometimes just adding a.active class is insufficient. For instance, we might prefer to use a custom function. This implies that a custom function that runs when the element is visible should be passable. similar to this:
scrollTrigger('.loader', {
cb: function(el) {
el.innerText = 'Loading ...'
loadContent()
}
})However, the IntersectionObserver API comes first.
The Intersection Observation is the primary JavaScript functionality that we will employ. This API offers a more efficient method of asynchronously observing changes in a target element’s intersection than simply keeping an eye out for scroll events. IntersectionObserver will be used to track when scrolling reaches the point on the page where specific items become visible.
Now let’s begin constructing the scroll trigger.
The function we wish to construct, scrollTrigger, should accept a selector as an argument.
function scrollTrigger(selector) {
// Multiple element can have same class/selector,
// so we are using querySelectorAll
let els = document.querySelectorAll(selector)
// The above `querySelectorAll` returns a nodeList,
// so we are converting it to an array
els = Array.from(els)
// Now we are iterating over the elements array
els.forEach(el => {
// `addObserver function` will attach the IntersectionObserver to the element
// We will create this function next
addObserver(el)
})
}
// Example usage
scrollTrigger('.scroll-reveal')Let’s proceed to utilize IntersectionObserver to produce the addObserver method that we wish to attach to the element:
function scrollTrigger(selector){
let els = document.querySelectorAll(selector)
els = Array.from(els)
els.forEach(el => {
addObserver(el)
})
}
function addObserver(el){
// We are creating a new IntersectionObserver instance
let observer = new IntersectionObserver((entries, observer) => { // This takes a callback function that receives two arguments: the elements list and the observer instance.
entries.forEach(entry => {
// `entry.isIntersecting` will be true if the element is visible
if(entry.isIntersecting) {
entry.target.classList.add('active')
// We are removing the observer from the element after adding the active class
observer.unobserve(entry.target)
}
})
})
// Adding the observer to the element
observer.observe(el)
}
// Example usage
scrollTrigger('.scroll-reveal')FAQs
How to make JavaScript scroll?
Nearly all web browsers provide the JavaScript scroll to element methods scrollIntoView(), scrollTo(), and scroll(), which are utilized for scrolling capabilities. There are web browsers that do not support the scrollIntoView() method’s argument component.
How to smooth scroll in JavaScript?
- In the navbar, add a click event listener to href.
- Use the preventDefault() function to stop anchor tag-induced auto-scroll.
- Choose the top: property to specify how much to scroll.
What is scroll triggered animation?
Simple animations that start when an element enters or exits the viewport are known as scroll-triggered animations. When an element enters the view, Motion provides the whileInView prop to set an animation target or variant.
