barn Posted August 15, 2022 Share Posted August 15, 2022 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 See the Pen xxWybZY by abirana (@abirana) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 Hi there You can use innerText to grab the text from an HTML element. element.innerText https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText Targeting '.text_span text' doesn't sound very stable to me though - you'll have to make sure this is the only element with that class name. Hope this helps! Link to comment Share on other sites More sharing options...
barn Posted August 15, 2022 Author Share Posted August 15, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 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? 1 Link to comment Share on other sites More sharing options...
Solution barn Posted August 15, 2022 Author Solution Share Posted August 15, 2022 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 More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 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 More sharing options...
barn Posted August 15, 2022 Author Share Posted August 15, 2022 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 More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 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 1 Link to comment Share on other sites More sharing options...
barn Posted August 15, 2022 Author Share Posted August 15, 2022 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 problem 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 More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 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) ? You'll also need to be including GSAP, textPlugin *and* ScrollTrigger in your script tags. Link to comment Share on other sites More sharing options...
barn Posted August 15, 2022 Author Share Posted August 15, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted August 15, 2022 Share Posted August 15, 2022 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 More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 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? Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 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 More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 - Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 Also from webflowhttps://university.webflow.com/lesson/custom-code-in-the-head-and-body-tags I'd suggest reading through this! It's pretty helpful. Link to comment Share on other sites More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 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 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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. 2 Link to comment Share on other sites More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 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 Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 More sharing options...
barn Posted August 16, 2022 Author Share Posted August 16, 2022 Yes the logs line is included but I does'nt give anything line 623 is not script related Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2022 Share Posted August 16, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now