barn

Hi @Cassie, if I may ask what measurement is end: "+=3000", ? -% -vh or -px and what define in this case the start/ or since its not defined is it default 0?

Thank you @Cassie, I guess start to understand , I will test in Webflow

Hi @Cassie as horizontal scroll trigger yes but I want to animate the typewriter effect at the first blue panel as well, when I scroll vertically into the viewport

Thanks I watched the video but I'm still stucked I don't know, how I can integrate typewriter code into the container that is actually interact, because if you check the codepen blue section, it doesn't affect isn't recognized, I assume because its nested the vertical scroll trigger as far I understand should be in the parent scrollTrigger but, Im a noob. Could you give noob proof explanation please to understand how is possible to create 1st vertical scroll panel trigger that is independent from the the nested ones but inside the same container 2nd nested horizontal scroll trigger that is independent from the vertical scroll panel, but dependent from the parent container this is the vertical script that is not working /blue section gsap.to(".typing_text", {x: 0, text:"Scroll down to animate horizontally >", scrollTrigger: { trigger: ".container", pin: ".typing_text-heading", start: "center center", end: "center top", scrub: true, markers: true } });

Hi @Cassie I want do first(vertical triggered typewriter scroll animation) https://codepen.io/abirana/pen/xxWybZY and than, inside the same container, as it start to scroll horizontally (using the fake horizontal scrolling animation) have again a typewriter effect animation but this time triggered horizontally

Hey @GSAP Helper Im not sure if this is the right demo , to implement the idea but at least I found a way to illustrate the issue How implement scroll triggered text typing vertically and than in nested form horizontally? https://codepen.io/trashcendence/pen/NWMxEXR

I only could find nested timeline impression, but only works on horizontal axis (there are no multiple tween option among the demos) <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> // Optional - Set sticky section heights based on inner content width // Makes scroll timing feel more natural function setTrackHeights() { $(".section-height").each(function (index) { let trackWidth = $(this).find(".track").outerWidth(); $(this).height(trackWidth); }); } setTrackHeights(); window.addEventListener("resize", function () { setTrackHeights(); }); </script> <script> // Horizontal scroll let tlMain = gsap .timeline({ scrollTrigger: { trigger: ".section-height", start: "top top", end: "98% bottom", scrub: 1 } }) .to(".track", { xPercent: -100, ease: "none" }); // hero photo gsap .timeline({ scrollTrigger: { trigger: ".hero-panel", containerAnimation: tlMain, start: "left left", end: "right left", scrub: true } }) .from(".hero-panel_img", { scale: 1.6 }, 0); // note gsap .timeline({ scrollTrigger: { trigger: ".note-panel", containerAnimation: tlMain, start: "left right", end: "left left", scrub: true } }) .from(".note-panel_img", { rotate: 45, scale: 0.3 }); // thanks gsap .timeline({ scrollTrigger: { trigger: ".thanks-panel_wrap", containerAnimation: tlMain, start: "left left", end: "right right", scrub: true } }) .to(".thanks-panel", { xPercent: 100, ease: "none" }) .to(".thanks-panel_photo", { scale: 1 }, 0) .fromTo( ".thanks-panel_contain.is-2", { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" }, { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" }, 0 ); // stagger photos gsap .timeline({ scrollTrigger: { trigger: ".stagger-panel", containerAnimation: tlMain, start: "left right", end: "right left", scrub: true } }) .from(".stagger-panel_img", { x: "100vw", stagger: { each: 0.05 } }) .to(".stagger-panel_img", { scale: 0.5, stagger: { each: 0.05 } }); </script> and I have added the typing impression to it <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/TextPlugin.min.js"></script> <style> /* .typing { max-width: auto !important; width: auto !important; } */ /*blinking cursor at info section*/ .cursor { animation: cursorBlink 0.5s alternate infinite; } @keyframes cursorBlink { from {opacity: 0;} to {opacity: 100%;} } </style> <script type="text/javascript"> // type="text/javascript" //define the parent scroll trigger let tlMain = gsap .timeline({ scrollTrigger: { trigger: ".section-height", start: "top top", end: "98% bottom", scrub: 1 //1 sec delay } }) .to(".track", { xPercent: -100, ease: "none" }); gsap .timeline({ scrollTrigger: { trigger: ".info", containerAnimation: tlMain, start: "center 30%", end: "top 0%", scrub: true } }) .from(".typing_text_target", { text: "lorem ipsum...............................",}); gsap .timeline({ scrollTrigger: { trigger: ".about", containerAnimation: tlMain, pin: ".typing2", start: "left left", end: "right left", horizontal: true, markers: true, scrub: true } }) .from(".typing_text_target2", { text: "lorem ipsum...............................",}); </script> however it doesnt type when I scroll the text is instant there, the console doesn't show any bug.. If I use .to instead of .from that text doesn't appear at all How can I use vertical trigger and horizontal trigger under one script? If

Hi I was wondering if there are any codepen out there that helps to understand how to apply independently multiple scroll trigger without timeline Im trying to implement sticky position horizontal scroll in webflow https://imgur.com/a/mgiAnPg where the 1st scroll trigger is vertical and the 2nd is horizontal My question is, is it possible to have 2 different embed script to implement this or they interfere? If it is possible, by any chance are there any example out there in GSAP repository?

yes I get help on webflow for codepen, but not for the integration, but anyway thanks

yeah I've meant other JS codes

JS is running because I'm using other custom codes but I will try thanks.

Yes the logs line is included but I does'nt give anything line 623 is not script related

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

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

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

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

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?

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

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

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; }, } );

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

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

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