Jump to content
GreenSock

Gasparo95

ScrollTrigger function activate

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'm not sure I understand what the problem is.

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

  • Solution

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!

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