I have an error on this code that I can't understand why keeps showing.
//Inline Promotion GSAP animation
console.clear();
const threshold = 0.7; // trigger
const options = {
root: null,
rootMargin: '0px',
threshold: threshold
};
const observer = new IntersectionObserver(animHandler, options);
const ar = Array.from(document.querySelectorAll(".two-column-promo-container"));
const animations = ar.map(el => (observer.observe(el), new TimelineMax({paused:true})));
var promoLeft = $(".two-column-promo-float-left .two-column-promotion"),
promoRight = $(".two-column-promo-float-right .two-column-promotion"),
featureLeft = $(".two-column-promo-float-left .two-column-feature"),
featureRight = $(".two-column-promo-float-right .two-column-feature");
TweenMax.set("promoLeft, promoRight, featureLeft, featureRight");
// timeline for each section
animations[0].from(promoLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, });
animations[1].from(promoRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, });
animations[2].from(featureLeft, 1.8, {y:-400, opacity: 0.0, delay:0.0, });
animations[3].from(featureRight, 1.8, {y:-400, opacity: 0.0, delay:1.0, });
// observer handler
function animHandler(targets, observer) {
for (var entry of targets) {
if (entry.isIntersecting) {
let i = ar.indexOf(entry.target);
animations[i].play();
} else {
return;
}
}
}