# Animate sections on scroll

**URL:** <https://community.hubspot.com/t/animate-sections-on-scroll/33036>\
**Category:** CMS Development\
**Created:** [March 11, 2021, 3:32pm UTC](https://community.hubspot.com/t/animate-sections-on-scroll/33036 "2021-03-11T15:32:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JSpinks](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jspinks/32/9373_2.png) [@JSpinks](https://community.hubspot.com/u/JSpinks)\
**Post date:** [March 11, 2021, 3:32pm UTC](https://community.hubspot.com/t/animate-sections-on-scroll/33036/1 "2021-03-11T15:32:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [March 11, 2021, 4:21pm UTC](https://community.hubspot.com/t/animate-sections-on-scroll/33036/2 "2021-03-11T16:21:34Z")

</div>

You could do this with a library like [AOS](https://michalsnik.github.io/aos/) or [Scroll Reveal](https://scrollrevealjs.org/), or you could do it yourself with an Intersection Observer like this (example to animate the section fading in from the left).

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

```

```lia-code-sample
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));

```

---

<div class="post-metadata">

**Author:** ![TFaerie](https://avatars.discourse-cdn.com/v4/letter/t/9d8465/32.png) [@TFaerie](https://community.hubspot.com/u/TFaerie)\
**Post date:** [May 2, 2025, 5:02am UTC](https://community.hubspot.com/t/animate-sections-on-scroll/33036/3 "2025-05-02T05:02:26Z")

</div>

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