elegantseagulls

This definitely seems like an issue with how your browser renders sub-pixels on your monitor (since it is using transforms, subpixel positioning will be present). Try a -1px margin-bottom to see if that fixes the issue. I'm not able to see the issue on my machine.

I cannot seem to edit the file (I tried forking the project, but couldn't get it to run properly), but I'm guessing you'll need to call your gsap timeline after the temp image is added to the page, otherwise gsap doesn't know what to call. Try console logging gsap.utils.toArray('.temp-image img") right after you create it, to see if you can target it at that point. if that's the case, you may need to call a function using that as a prop... something like: const animateTempImage = (tempImg) => { gsap.to(tempImg, { ... }) } animateTempImage(gsap.utils.toArray('.temp-image img'))

I think you're missing a deps array for your useEffect (as well as garbage cleanup). useEffect(() => { ... }, [])

I'd recommend reading up on how React's lifecycles work: https://reactjs.org/docs/hooks-effect.html and also this could be very useful as well:

You'll want to make sure your tl.current exists here... and since it's a ref, you don't need to pass it into the deps. useEffect(() => { if (!tl.current) return; isOpen ? tl.current.play() : tl.current.reverse() }, [isOpen])

You forgot a deps array on the useEffect that's setting up your timeline. I'm wondering if this is causing a re-render that would break the .from animation. useEffect(() => { tl.current = gsap.timeline({ paused: true }) ... }, []) It might also be helpful to use gsap's context here as well (really helpful for garbage cleanup, and using GSAP in React's strict mode): https://greensock.com/docs/v3/GSAP/gsap.context()

Did you try this?

You'll want to use start: "top top", end: 'bottom bottom', to prevent the right content from scrolling too soon. You'll also, then, need to set a specific scrollable area for the content in the right rail. This thread maybe very helpful too:

Hi Sukro, Wondering if what you're seeing is FOUC, since the page will load with the HTML and CSS before it applies Javascript styles. This article might be helpful:

@andrewandopen

@Visual23, What might be happening is: understanding how timeline position parameters work, each .to or .from gets chained together, unless you add a position parameter. More here: Try this, maybe? timelines[1].to('#section-2', { backgroundColor: 'red', duration: 1, opacity: 1 }) .to('#section-2 .wave-transition', { yPercent: -100, }, 0)

I think using gsap's quickTo would be a good solution here. If you look at the mouse-follow example, you could apply the 'follow easing logic' to your progress. https://greensock.com/docs/v3/GSAP/gsap.quickTo() You can tween a timeline's progress like this: gsap.to(timeline, { progress: desiredProgressAmount }) or quickTo would look something like this:const letterScale = gsap.quickTo(timeline, "progress", {duration: 0.6, ease: "power3"})

Also, Have you tried ScrollSmoother instead of Locomotive? It's designed to work with ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollSmoother

This is because your rotation elements aren't part of your ScrollTrigger You'll want to either separate those into their own ScrollTriggers, or add this to your pin/scrub tween as a timeline like this: gsap.timeline({ scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, start: "top top", end: pinWrapWidth, markers: true, }, defaults: { ease: 'none' } }) .to(".pin-wrap", { x: -horizontalScrollLength, }) .to('.anuncio1', { rotation: 360*5, },0);

It looks to me like your initial pin is a section or two too short (you're starting your animations after a VH scroll, so it's unpinning too soon. end: `${window.innerHeight * (sections.length + 2)}px bottom`, helps fix this so that all your animations complete during the scroll trigger. As for the wave-transition, I'm not entirely sure what you're going for here... This example may be helpful: https://codepen.io/GreenSock/pen/BaowPwo