ScrollTrigger function activate

[Gasparo95 0 Likes (Newbie)]

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 += "&nbsp;"}

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,

});

});

[SteveS 177 Likes (Specialist)]

I'm not sure I understand what the problem is.

[GreenSock 18,577 Likes (Superhero)]

I don't really understand the question either - can you please provide a minimal demo (like a CodePen), @Gasparo95? 

 

Every time you call that function, you're creating entirely new innerHTML (new elements entirely) that you're trying to animate. Are you sure that's what you want? Are you trying to do what SplitText does (but without SplitText)? 

 

It looks like you're using a very old syntax too - there's no need for TweenMax anymore. GSAP 3 launched many years ago and it has a more streamlined API. See

 

 

A minimal demo will go a long way toward getting you an answer. 👍

[Gasparo95 0 Likes (Newbie)]

thank you very much for the answer, I did not know the gsap plugins to manipulate the text, of course I solved it thanks to your documentation. A thousand thanks! Sorry if I wasted your time!