serotoninene

Of course ! Thank you so much that explains everything ! That's perfect !

Hello ! I'm trying to set up a snap effect that would redirect the scroll toward the start of the horizontal panels but getting really poor results so far, the scroll stops in betwen two panels... I'm also really intrigued by the progress of the scrollTrigger : it's around 0.13 when we get to the second panel, then 0.30 for the third, 0.50 for the fourth and 1 when we get to the last ... why isn't it 0.25, 0.5, 0.75 and 1 ? Made a very simple codepen so you can see for yourselves. Please enlighten me I can't seem to find the answer ? https://codepen.io/serotoninene/pen/dywVZME

It works ! Thank you very much !

Actually sorry ! My bad, it's not the console that's responsible, it's just when you resize the window ...

I'm gonna try to make a sandbox but as said I have no clue how to replicate the problem but let me try it ! Small question do u see the scroll disappearing or stopping before it ? Thanks for the feedback

Hi, everyone ! Sorry I don't have a codepen as I have no idea how to replicate my problem, but i have the actual website that's already live : https://alexandrepujol.com/ I have a scrollIndicator (on the bottom right of the homepage) that's suppose to disappear when I scroll all the way down: tl.to(lineRef.current, { y: 25, scaleY: 0, scrollTrigger: { startTrigger: "#Homepage", start: "top top", end: "bottom bottom", // correct end markers: true, scrub: true, onLeave: () => { setScrolling(false); }, onEnterBack: () => { setScrolling(true); }, }, }); When I reach the bottom, it toggles my state, which triggers a small animation to make it disappear : gsap.to(lettersRef.current, { yPercent: -100, stagger: 0.02, ease: Power3.easeOut, }); The animation is only triggered when the console is open, when it's not, it stops before triggering the animation : When I put the markers on, I see that the end trigger has move more or less 100vh below where it's supposed to be, when I put the console mode on, it comes back to were it should. Anyone has had that problem before ? I can't explain it ... Thanks if you have any idea what it is and even if you don't Cheers

Thank you so much both, and sorry for the lack of codepen, next time I'll ask something here I'll make sure to create one ! You're answers were right on point and I'm gonna go with tweenTo, it perfectly solves my problem Thanks again

Hi ! I'd like to know if it's possible to reverse a timeline until let's say half of it ? I've tried seek() and progress() but it restart the timeline every time instead of playing back til halfway. There must be a super easy way of doing this, plz share it with me ! Good day from France

Thank you for your help ! You were right, the problem wasn't from gsap, but from my custom shader that was restructuring itself on every renders ? I solved the issue by creating a separate class and updating only the uniforms inside of it. Thanks again !

Hi ! I've been using react-thee-fiber to create a 3D scene and using custom glsl shaders in it. I want to animate the shaders on scroll with gsap but got no result. Did I miss anything ? Here is my 3D mesh, basically a sphere, that should get distorted with the modification of 'uDistortionFrequency'. <mesh position={[0, 0, 0]} ref={meshRef}> <sphereBufferGeometry args={[2, 64, 64]} /> <shaderMaterial ref={sphereShaderRef} args={[ { uniforms: { uCube: { value: texture }, uTime: { value: 0 }, uDistortionIntensity: { value: data.uDistortionIntensity }, uDistortionSpeed: { value: data.uDistortionSpeed }, uDistortionFrequency: { value: 0.0, }, }, vertexShader: vertex, fragmentShader: fragment, }, ]} uniformsNeedUpdate={true} side={THREE.DoubleSide} /> </mesh> Here's my gsap animation, useEffect(() => { gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: "#MainContainer", id: "3D Timeline", start: "top top", end: "bottom bottom", scrub: true, }, }); tl.to(sphereShaderRef.current.uniforms.uDistortionFrequency, { value: 1.5, ease: Power3.easeIn, onUpdate: () => { console.log( sphereShaderRef.current.uniforms.uDistortionFrequency.value ); }, }); }, []); The results of the "console.logging" are always 0 : Maybe I've missed something, i don't know, when I change the uDistortionFrequency value manually, it affects the mesh. + I've created an object "AnimatedValues" and plugging it into the uniforms, i manage to animate it with gsap but it still has no effects on the shader ... let animatedValues = { uDistortionFrequency: 0.0, }; // in the useEffect function ... tl.to(animatedValues, { uDistortionFrequency: 1.5, ease: Power3.easeIn, onUpdate: () => { console.log(animatedValues.uDistortionFrequency); }, });