AnDinh

Hi, I'm looking to use ScrollTrigger to mimic a video caption (combine with THEEjs) I'm very new to ScrollTrigger so please bear with me. I have 3 problems as follow: 1. I kinda achieve the first sentence using pin but I can't find a way to hide the first sentence after its end. So it kinda fly up and ruin the effect: 2. Maybe I misunderstand about how gsap timeline works but I set a timeline to control the GLTF animation with the end set as 1000vh: let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: renderer.domElement, start: "top top", end: "1000vh", pin: true, scrub: true, markers: false, onUpdate: function() { camera.updateProjectionMatrix(); console.log(proxy.time) } } then I add a scroll trigger for the first sentence text with the ending of 500 vh: scrollingTL.to("#p1", { scrollTrigger: { trigger: "#p1", start: "bottom 80%", end: "500vh", pin: true, scrub: true, markers: true, } }) I thought since the the sentence ends after 500vh while the anim ends after 1000vh, so the text should stop being pinned after half of the anim but it lasts way longer than that. I'm not sure what's wrong with it. 3. Is there a better way to sync the second, third, fourth etc sentence after the end of the previous one? Right now, putting random numbers in and hope they sync up is what I'm doing and it's a pain to do with more text or tweak their time. Thank you in advance

I do think the problem doesn't come from ScrollTrigger. I've made some change to the "running model" code pen to see what's wrong. Turn out, the method to link THREE js and ScrollTrigger from that Codepen just broken with the animation is too long and/or the end-amount is big. The combination of both result in proxy.time jumping

Hi, I'm having a weird problem with gsap timeline. I'm trying to play GLTF animation base on scroll, but for some reason, when you scroll down then scroll back up, the timeline doesn't get back to 0 AKA the animation doesn't get back to its initial state. I set console.log and turn out the time just skip 1-2 seconds at the start of the animation. It seems like this only occurs when the end is set above 1000%. Is there a way to prevent this from happening? Disclaimer: This code is modified from GreenStock codepen , link: https://codepen.io/GreenSock/pen/PomoJNN?editors=1111