GSAP scrolltrigger and -textplugin combo issue

[barn (B)]

Hi,
trying to implement this

How to combine GreenSock's (GSAP) ScrollTrigger and TextPlugin

in webflow by applying it into an existing textblock class
but it doesnt work

the code is embeded under the same div as the textblock

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>
  
   <script>
   
   gsap.to("#info_wrapper", {
  text: "#highlighted_text",{
        delimiter: " ",
    }
  duration: 10,
  //delay: 1,
  scrollTrigger: {
    trigger: "#info_wrapper",
    }
     //let cursor = gsap.to('.cursor', {opacity:0, ease: "power2.inOut", repeat:+1}) 
  
});
   
    </script>

any idea or other alternative for scroll triggered typewriter animation would be appreciated

---

link https://preview.webflow.com/preview/k-an?utm_medium=preview_link&utm_source=designer&utm_content=k-an&preview=895c4fe39388cebbcd5f87b4dfc34b88&workflow=preview

[abirana (Abi Rana | Creative Web Developer)]

Check this Codepen I just created for you, this should help.

https://codepen.io/abirana/pen/xxWybZY

[barn (B)]

thank you sir, really appreciate, I will try it out

[barn (B)]

I have textblock class, inside the textblock class there is an inline “cursor” class and a “typing text” class, I have managed to refer/transcript the cursor into the custom code,
however I can’t refer the typing_text not even with element.innerText transcription

HTMLElement: innerText property - Web APIs | MDN

Im confused how can it be integrated into the
text: {} line

<script>
  const myTextElement = document.getElementById("typing_text");

gsap.to(".typing_text",{
text: {
??how is  the appropriate way to apply   value: myTextElement.innerText;  here??
  },
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
    //markers: true
  }
}
);
    
    </script>

I have tried to apply original way and include the text string inside the text :{ value: “”}
but it also didnt worked out

Any noob-proof instruction is appreciated

[barn (B)]

To debug excluded Scrolltrigger function, still typing does’nt work

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>
 
 
   <style>
   
   .cursor {
  animation: cursorBlink 0.5s alternate infinite;
}

@keyframes cursorBlink {
  from {opacity: 0;}
  to {opacity: 100%;}
}
  </style>
  
  <script>
  
const myTextElement = document.getElementById("typing_text");

gsap.to(".typing_text",
{
text: {
value: myTextElement.innerText,
  },
 }
);
    
    </script>

run through debug from the console, but didn’t showed up anything for this section,
if anybody has any clue, would be much appreciated.

[abirana (Abi Rana | Creative Web Developer)]

Oh ok so you want to get the text form the page, then your code above should definitely work, I’ve also tested myself.

By the way, did you place the whole JS code?
And did you add the ID for the typing_text on the element where the text is? Because you are using getElementById so that element should have ID. Also that element should have those texts.

If you’ve taken care of these 2, it should work. Please check and let me know if there is anything.

const myTextElement = document.getElementById("typing_text");

gsap.to(".typing_text", {
  text: {
    value: myTextElement.innerText
  },
  scrollTrigger: {
    trigger: ".section-typing_text",
    pin: ".typing_text-heading",
    start: "center center",
    end: "center top",
    scrub: true,
    markers: true
  }
});

We only have one option for the text so we can do like this as well.

text: myTextElement.innerText,

[abirana (Abi Rana | Creative Web Developer)]

I’ve updated the CodePen so yo can check that as well.

[barn (B)]

Thanks again @abirana
Yes I have defined the ID for typing_text

For trigger (".section-typing_text) since I have a combo class and to simplify I use instead an id : info

I have textblock that runs under the name typing it has two inline class typing_text and cursor
The cursor blinking function works, but the rest doesn’t
here is the code

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>
 
 
   <style>
   
   .cursor {
  animation: cursorBlink 0.5s alternate infinite;
}

@keyframes cursorBlink {
  from {opacity: 0;}
  to {opacity: 100%;}
}
  </style>
  

  <script>
  
const myTextElement = document.getElementById("typing_text");

gsap.to(".typing_text", {
 text: myTextElement.innerText
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
  }
 }
);
    
    </script>

Still the the typing and scrolltrigger function does’nt work

the issue is at the line 622:

 text: myTextElement.innerText

if I use , at the end
I got this message

If I use ; at the end of the line than got this message:

If I don’t use I got “Unexpected identifier” at line 623

The rest of the bugs are not script related since its start from 580 line
I have ran out of clues, if anyone bumped into sg like this could please illuminate a noob like
me…Does webflow not recognise nested functions or what?

[barn (B)]

also any idea how to run script after html load?
I have try add the whole code into webflow main settings custom code
footer section without the
async function
but still apart from the pin function doesnt work
and according to console there are no script related bug

update:
​
I have tried 9 different way at the footer section in the main settings

*1st no bug still apart from the pin function doesn’t work

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>

  <script>
 const myTextElement = document.getElementById("typing_text");
    
gsap.to(".typing_text", {
 text: myTextElement.innerText,
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
  }
 }

*2nd: no bug still apart from the pin function, doesn’t work

  <script>
 const myTextElement = document.getElementById("typing_text");
    
gsap.to(".typing_text", {
 text: myTextElement.innerText,
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
  }
 } 
);
    
    </script>

*3rd: Uncaught TypeError: Cannot read properties of null (reading ‘innerText’)

  <script>   

gsap.to(".typing_text", {
 text: myTextElement.innerText,
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
  }
 } 
);
 </script>

Also tried with defer and later async to include in with previous setup

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"></script>

*1st: Uncaught ReferenceError: gsap is not defined

*2nd: Uncaught ReferenceError: gsap is not defined

*3rd: Uncaught ReferenceError: gsap is not defined

Also tried reverse

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/TextPlugin.min.js"defer></script>

same result: Uncaught ReferenceError: gsap is not defined

​

[barn (B)]

I have tried to include this in the main settings custom code Footer section

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/TextPlugin.min.js'></script>

// this must come AFTER the GSAP scripts and AFTER the HTML element
<script type="text/javascript">
   
const myTextElement = document.getElementById("typing_text");

console.log(myTextElement, myTextElement.innerText)

gsap.to("#typing_text", {
  text: {
    value: myTextElement.innerText,
  },
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true, 
  }
 }
)

</script>

but the console log doesnt show any related bug

[Cassie_Evans]

Just a heads up that this is a duplicate post over on the GSAP forums. We’ll let you handle it over here as the console log isn’t firing - so it seems more related to not understanding how to run JS in webflow than GSAP

Textplugin webflow integration using existing external textblock

[barn (B)]

Thanks, but I have opened that topic in GSAP forum

[abirana (Abi Rana | Creative Web Developer)]

Hi @barn

There are quite a few things that you should notice here.

First, if you check my CodePen you should she that typing_text element starts without any texts. But you are starting with the same texts, so it won’t animate.

@barn

gsap.to("#typing_text", {

And in your last script you’ve mentioned id where it should be class.

And one another thing is that I made the example for vertical scroll and your implementation is for horizontal scroll, so that is also the reason it is not working.

For that you should add another line for ScrollTrigger setup: horizontal: true

And don’t just copy paste the code, please try to understand the code. If you do not pay attention even a single missing ’ comma, would be enough for a good headache.

[abirana (Abi Rana | Creative Web Developer)]

So for you I’ve made an example right in Webflow and also made it work with horizontal layout. Please check the live page here

Horizontal Scroll based Typewriter effect with GSAP

And you can check the Webflow project here https://preview.webflow.com/preview/abirana?utm_medium=preview_link&utm_source=designer&utm_content=abirana&preview=abe5f6160428f4d149c74ceab76a201b&pageId=62fcbafa49d3fedaad92880a&workflow=preview

By the way, I’ve named each ID and class different so you shouldn’t have issue with that. And you can find the custom code on the page settings.

Please check and let me know if there is anything.

[barn (B)]

Thanks @abirana observing your webflow code partly makes things sense the text input source have to be different from the output so if I have to use 2 different textblock

[abirana (Abi Rana | Creative Web Developer)]

Great, I hope you’ll make it work now.

Just to let you know, there is a better way to do horizontal scroll with ScrollTrigger but it is a little bit more work. If you want you should check more about it here

GSAP 3.8 Released

[barn (B)]

Your code is working , however my website direction is vertical, it might seems horizontal because I havent sorted out yet the fluid design

how can it type horizontally ?
Im using the same code and the same style setups at Webflow

[barn (B)]

thanks @abirana ,Im trying to understand, therefore, just clarification what is the right way to refer id in webflow script is it start with # , Im aware the class start with a dot

update: sorted
have to define the min and max charater

[barn (B)]

Hi @abirana is it possible to use this script for vertical and horizontal scroll at the same time
Because I have site that has bof and for vertical it works but when I try to apply it for horizontal it doesn’t

tried with both way by
horizontal: true,
and
//horizontal: true,
both have the same result what screenshot shows

The vertical scroll works

where the
trigger:".info",
is in the header

but when I try to do add an other combo class “about” to the header
that could be the trigger for the horizontal scroll it simply doesn’t recognise

How is it possible to have multiple ScrollTriggers? Any advice appreciated

read link: Webflow - k∞an
weblink: Webflow - k∞an