GSAP scrolltrigger and -textplugin combo issue

Hi,
trying to implement this

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

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

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

1 Like

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

1 Like

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

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

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.

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,
1 Like

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

1 Like

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?

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

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 :confused:

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

Thanks, but I have opened that topic in GSAP forum :slight_smile:

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.

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.

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

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.

1 Like

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

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

Your code is working :slight_smile: , 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

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 :slight_smile:

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


Screenshot 2022-09-03 at 14.48.54

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