hi guys, i am a newbie and i am trying to execute a function every time the element needs to animate in the viewport. at the moment it only works from top to bottom and not the other way around ....
a thousand thanks! what am I doing wrong?
gsap.registerPlugin(ScrollTrigger);
const textAnimationContainers = document.querySelectorAll('.text-animation-container');
const textAnimationElements = document.querySelectorAll('.text-animation-element');
function animateTextInViewport() {
textAnimationElements.forEach((e,i)=>{
var newText = "";
var theText = e;
for (i = 0; i < theText.innerText.length; i++) {
newText += "<span>";
if (theText.innerText[i] == " "){newText += " "}
else {newText += theText.innerText[i];}
newText += "</span>";
}
theText.innerHTML = newText;
var targetsDiv = e.querySelectorAll("span");
TweenMax.staggerFromTo(targetsDiv, 2, {opacity:0, y:90, ease: Elastic.easeOut.config(1.5, 0.5)}, {opacity:1, y:0, ease: Elastic.easeOut.config(1.5, 0.5)}, 0.03);
})
}
textAnimationElements.forEach((e)=> {
ScrollTrigger.create({
trigger: e,
start: "top bottom",
scrub: true,
onEnter: animateTextInViewport,
onEnterBack: animateTextInViewport,
});
});
