Animate sections on scroll

Developer Support CMS Development
1

Hey there, I am building a page with many sections, and I want to be able to have each section fade in from left/right etc as I scroll down the page, making the whole thing more dynamic.
Does anyone know how I can add this type of intro animation to a section?

2

You could do this with a library like AOS or Scroll Reveal, or you could do it yourself with an Intersection Observer like this (example to animate the section fading in from the left).

.my-class {
 opacity: 0;
 position: relative;
 left: -50vw;
 transition: all 400ms ease-in;
}
.animate {
 opacity: 1;
 left: 0;
}

const selector = '.my-class'; // class of the elements you want to animate
const animateClassName = 'animate'; // class of the animation to be applied

const animate = element => (
 element.classList.add(animateClassName)
);

const isAnimated = element => (
 element.classList.contains(animateClassName)
);

const intersectionObserver = new IntersectionObserver((entries, observer) => {
 entries.forEach((entry) => {

 // when element's is in viewport,
 // animate it!
 if (entry.intersectionRatio > 0) {
 animate(entry.target);
 }

 });
});

// get only these elements,
// which are not animated yet
const elements = [].filter.call(
 document.querySelectorAll(selector),
 element => !isAnimated(element, animateClassName),
);

// start observing your elements
elements.forEach((element) => intersectionObserver.observe(element));
3

Thanks for the info, I just have no idea what it means or how to apply it. Where would you even add the coding? When you click on an image there’s nowhere to input it