Jump to content
GreenSock

barn

Textplugin webflow integration using existing external textblock

Go to solution Solved by barn,

Recommended Posts

gsap.to(".text_span",{
text: {
how can I refer here .text_span text},
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "+=200",
    scrub: true,

Hi Im wondering how can I transcript refer an external class from webflow into custom code

so when it comes to the text part..

 

how can I transcript to an existing textblock?

if the cursor and textspan is inside the textblock class as inline classes
 

Screenshot 2022-08-15 at 13.22.34.png

See the Pen xxWybZY by abirana (@abirana) on CodePen

Link to comment
Share on other sites

  • barn changed the title to Textplugin webflow integration using existing external textblock

Thank you

I have changed the text_span class name to "typing_text" as well as its id name,

 

Im wondering if I have to apply this code inside the text: {} line?

const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;

sg like this?

<script>
  
const source = document.getElementById("typing");
const innerTextOutput = document.getElementById("typing_text");

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

or this

gsap.to(".typing_text",{
text: {
element.typing_text
  },
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
    //markers: true
  }
}
);

 

or how else, just , because the none of them work.
Any noob-proof instructions would be much appreciated

  • Like 1
Link to comment
Share on other sites

Heya! Not sure what any of these elements are or what's inside them? What's source? Definitely overcomplicating things here!

You just need to grab the inner text of the element that has the text inside.
 

// I assume this is the span with your text?
const myTextElement = document.getElementById("typing_text");

gsap.to(".typing_text",{
 text: {
  value: myTextElement.innerText; // this returns a string of the text, so it's just like writing...
  value: "my text string"
 }
});


Does that clear it up?

 

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi,

You right I'm overcomplicating :)..

For clarification:

- the "cursor" and "typing_text" are inlined classes inside the "typing" text block.

I have followed your instruction and included the those lines that you added
I assume that under "my text string" you have meant,  the text that will be typed

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

gsap.to(".typing_text",{
text: {
value: myTextElement.innertext;
value: "Welcome to the new xy of..."
  },
  scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
    //markers: true
  }
}
);
    
    </script>

I have ran the script, but its not typing

Link to comment
Share on other sites

Sorry, no - you weren't meant to actually include both of them, just the innerText line. I was just writing out a little comment for you so you knew that those two lines mean the same thing.
 

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

 

Link to comment
Share on other sites

I see,
unfortunately still does'nt work

eventhough I had excluded the ScrollTrigger function to debug

 

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

gsap.to(".typing_text",
{
text: {
value: myTextElement.innertext;
  },
 }
);
   

 

Link to comment
Share on other sites

Ah yeah - typo - innerText not innertext

console.log() is a very helpful way to debug too.

 

e.g. console.log(myTextElement.innerText) to see what value you're getting, is it a string of text? Does it exist?

https://www.w3schools.com/jsref/met_console_log.asp

  • Like 1
Link to comment
Share on other sites

Thanks I have ran a debug on

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

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

here:

https://jsonformatter.curiousconcept.com/#

and there are still 2 bug here
but I don't get what is the actual problem44050173_Screenshot2022-08-15at19_29_04.thumb.png.077a45c3ffc46e8be82a9232b9dc844c.png

 

Also tried to debug in the browser console but it doesnt show any bug for this particular section

Link to comment
Share on other sites

Thanks for checking for bugs, but this is getting into a bit of a muddle. JavaScript and JSON are two different languages.

Here's a demo to show that it works. 

See the Pen mdxQyaZ?editors=1010 by GreenSock (@GreenSock) on CodePen



Does the browser console show anything if you log out console.log(myTextElement, myTextElement.innerText)  ? image.png
You'll also need to be including GSAP, textPlugin *and* ScrollTrigger in your script tags.

Link to comment
Share on other sites

 

Yes I have included

every plugin

<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: {
    value: myTextElement.innerText;
  },
    scrollTrigger: {
    trigger: "#info",
    pin: ".typing",
    start: "center center",
    end: "center top",
    scrub: true,
  }
 }
);
    
    </script>

 

Run console.log(MyTextElement.innerText) in the console https://k-an.webflow.io/

but it says element is not defined

OAKBsAi.png

 


 

Link to comment
Share on other sites

Well then, that's the issue!

Double check your ID? Make sure the bit of HTML you're targeting is actually there when the JS runs. Your JS should be after all the HTML at the end of the body.

Sorry you're struggling, I hope this helps

Link to comment
Share on other sites

thanks for your patient


Yes I have defined the ID for typing_text 

has the same id as the class name

 

still the issue is at the line 622:

if I use ',' at the end of the line

 text: myTextElement.innerText,

I got the message what is in the screen shot

if I don't use ',' than the bug appears at line 623

 scrollTrigger: {

as "Unexpected Identifier"

 

But If I have defined:

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

Im clueless as the rest of the bug is not related to this script

Does webflow not recognise nested functions or what?

Screenshot 2022-08-16 at 10.18.57.png

Screenshot 2022-08-16 at 09.57.54.png

Link to comment
Share on other sites

12 hours ago, Cassie said:

Your JS should be after all the HTML at the end of the body.

 ^^^

 

This is the issue, you're running the JS before your HTML has loaded. The element doesn't exist. The script needs to be AFTER your HTML

Link to comment
Share on other sites

does it mean that I have to add the code 

in Page /Settings/ Before body tag section? because apart from the pin function is not working neither

 

 

this site claims

https://skillforge.com/how-to-run-external-javascript-after-the-html-has-loaded/

that:

Quote

The async attribute makes it so the script can be run separate (asynchronously) to the page loading and will wait for the HTML to load before it tries to run any of the scripts.  Before, it ran the external JavaScript first, then continued loading the page creating the error.  Now it makes it so the JavaScript can be run separate from the HTML and doesn’t have to load first.  This will eliminate the error we are getting.  After adding the async attribute we will get what we were expecting in the browser:

so I have included async

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

 

still doesnt work
as it says at line

gsap.to(".typing_text", {

Uncaught ReferenceError: gsap is not defined

Link to comment
Share on other sites

image.png

 

Physically after. Your code, needs to be called after the HTML is loaded.

In order to animate the element, your code needs to be able to access it. At the moment you're running the JS and there's no element to animate or get text from.

From webflow university -

image.png

Link to comment
Share on other sites

Thanks, I have read it, and understand that the script have to come after the html, so

I have add everything into custom code footer at webflow main settings , saved changes

 

still it doesnt work apart from the pin function and cursor blink,

https://www.loom.com/share/fab90171652443789c9b086fb224b9dd

but according to the console there is no bug, related to this script at this time

 

Screenshot 2022-08-16 at 14.26.51.png

Link to comment
Share on other sites

That's not your JS code. You've moved everything apart from the GSAP code that I circled. You didn't need to move any of that stuff. Just the bit I circled.

Please look at the screenshot I drew on with red lines. Only your GSAP code needs to be in that footer code section, everything else was fine where it was before.

 

Link to comment
Share on other sites

Understand

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

  • Like 1
Link to comment
Share on other sites

Ok slow down. 

Stop messing about with defer and async. That's not needed!

In your footer code section put the following

// you can put these in the head or at the end of the body, you don't need defer or async
<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");

// PLEASE LOG THIS OUT AND TELL ME WHAT YOU GET
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>


please also make sure that your element has this ID on - I think you're confusing ID's and Classes

You're using document.getElementById("typing_text") so you need an ID not a class.

// the text needs the correct ID
<span id="typing_text">whatever the text is</span>

// not a class
<span class="typing_text">whatever the text is</span>



Let me know what the console logs out!

 

Good luck.

  • Like 2
Link to comment
Share on other sites

thank you,

so typing_text has the same id as its class  that I have defined through webflow not through html

<span id="typing_text"></span>

Followed your instruction and tried bof way head and body with these 3

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

there are no bugs  shows up in the console, but unfortunately still doesn't work

Screenshot 2022-08-16 at 17.18.42.png

Link to comment
Share on other sites

Alright - What does the console say though - you put a console log in there - what does that log out?

Link to comment
Share on other sites

Yes the logs line is included

but I does'nt give anything

wVWx3qg.png

line 623 is not script related

Link to comment
Share on other sites

Ok well then that means that JS isn't running at all. Keep trying and let me know when you get a console log!

Make sure to copy paste my code exactly.

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