CSS and JS animation for module doesn't work

Develop, Build & Integrate CMS Development
1

Hello there!

I was editing some modules on Hubspot and adding it animation/transition, especially the fade-in. In the preview of the module, the animation work as I want, so I published it. In the drag-and-drop editor, i select the module, preview the web page, and it works! Until I add another animated module or duplicate animated module on the same page to have more block content animated, I just have 1 out of all animated module working; the 1 is appearing and working, the rest just don’t appear.

bellow the css i use :

.container {
 display: flex;
 justify-content: center;
}

.animated {
 background-position: center;
 background-size: cover;
 transition: 1s;
 opacity: 0; /* caché par défaut */
}
.fadeInLeft-animation {
 animation: fadeInLeft 2s;
 animation-fill-mode: forwards;
}

@keyframes fadeInLeft {
 0% {
 opacity: 0;
 transform: translateX(-50px);
 }
 100% {
 opacity: 1;
 transform: translateX(0);
 }
}

and the js :

 const options = {
 rootMargin: '0px',
 threshold: 0.1 // déclencher l'animation lorsque 10% de l'élément est visible
 }
 const observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 // Ajouter la classe d'animation au conteneur
 entry.target.classList.add('fadeInLeft-animation');

 observer.unobserve(entry.target);
 }
 });
 }, options);

 observer.observe(document.querySelector('#observer .container'))

Is there anyone who fave faced the same problem ? How did you solve it ? Are (my) these codes the right ones to make it ?

Thank you!! :slightly_smiling_face:

2

You’re only referencing the first element in the last line where you’re instantiating the observer. Should be:

const animateElements = document.querySelectorAll('#observer .container');

animateElements.forEach(element => observer.observe(element));

// or

for (i = 0, l = animateElements.length; i < l; i++) {
 observer.observe(animateElements[i])
}
3

@piersg Thanks for your help, it was this one!