Detrol

Yeah sorry, i forgot to add that part. I've added it to the top post now. But yeah, just tell the bot how it should work, and eventually it will figure it out, that's my experience at least. Would be really cool if it was able to create more advanced features in the future. But as i said, that the more we use it, the more it should learn all the syntaxes and how to create clean code. PS. I'm very new to GSAP myself, so i can't really say that what i asked it to do is optimal in any way.

For anyone that wonders, it works! But it took me a few tries to make the bot learn what i wanted it do do. Sure, i might have confused it a couple of times, but it's an AI. So hopefully it learns by each creation we assign it to. If anyone wanna see the conversation i had with it, check it out here. Although it's a pretty long read. (i noticed that i couldn't paste the url itself without it generating the image inside the post, so you might have to right click and open it yourself). Either way, try it out for yourself! Here is the working example it eventually generated for me, as i wanted it to work. // Trigger the animation when the .test element is in view gsap.to(".test", { scale: 1.1, duration: 1, yoyo: true, ease: "power1.inOut", repeat: 1, // Repeat the animation once on enter and once on re-entry scrollTrigger: { trigger: ".test", start: "top center", end: "bottom center", scrub: true, // Smoothly progress through the animation while scrolling onEnter: () => { gsap.to(".test", { scale: 1, duration: 1, ease: "power1.inOut", }); }, onEnterBack: () => { gsap.to(".test", { scale: 1, duration: 1, ease: "power1.inOut", }); }, }, });

I got it sorted after some sleep. Wasn't so difficult, just a tired brain. const myTextElement = document.getElementsByClassName("jag-decoy"); const timePerCharacter = 0.02; gsap.to(".jag", { scrollTrigger: { trigger: ".jag", toggleActions: "play", start: "top 90%", end: "bottom 50%+=100px", }, text: { value: myTextElement[0].innerHTML }, duration: myTextElement[0].innerText.length * timePerCharacter, delay: 0.5, ease: "none", delimiter: " " })

Hey! So i love the demo typewriter, as in the one found here https://codepen.io/GreenSock/pen/RwBwJBm But, how can i combine it with scrolltrigger, so it will start "typing" when i scroll down to that section, and not as soon as i load the page? Thank you in advance!