Jump to content
Search Community

ScrollTrigger function activate

Gasparo95 test
Moderator Tag

Go to solution Solved by Gasparo95,

Recommended Posts

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,
});
});
Link to comment
Share on other sites

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. 👍

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...