Jump to content
GreenSock

Gasparo95

Members
  • Posts

    2
  • Joined

  • Last visited

Gasparo95's Achievements

  1. 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!
  2. 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, }); });
×