Dronius

@Rodrigo Thank you for the response. Yes, I understand that is the issue and I mentioned that it was in my initial post, but what could be a proper fix for it?

@alig01 Thank you for the reply. I linked the layout shift to the reveal gsap animation because of a few reasons: In my custom useFadeIn() hook(demo) i use the translateY: 70, property in my animation, which basically determines exactly how much my markers shift, for example if I change it to translateY: 10, they move only 10px down. For me it makes sense because I am using .from() so the content of the page is set 70px down (because of translateY: 70) initially and that's when the scrollTrigger markers for another animation are set. The content only moves 70px up when the content comes into view, but then the other animation has already set it's markers 70px down and that is what causes the "layout shift". I thought I am missing some key point, because it seems like a common scenario "animation offsetting another animation scrollTrigger".

Hey, so after some time trying I couldn't manage to replicate this bug on stackBlitz, although it is still there in my actual project. I don't know if this is much help, but here's the non buggy version of my project - https://stackblitz.com/edit/react-apvecf?file=src%2Findex.js The problem is the same one that I mentioned in my initial post, maybe someone has any ideas what could be causing this, maybe something I forgot to add to stackblitz? Here is the still active bug in my actual project:

In my react application I am using two scroll triggers, one for the main "reveal" animation and another for "another" animation. The problem is that when the scrollTrigger markers are set for the "another" animation the "reveal" animation hasn't happened yet and that causes an offset in the "another" animation markers. Here is what I am talking about: The start and end markers should be where the red line is, but instead they are offset by 70px. This is because when the page loads the "reveal" animation that moves the whole element up 70px hasn't ran and it only runs when the element has come into view. Here is the code: The reveal animation that is offseting the element(translateY): useLayoutEffect(() => { if (elementToAnimate) { const context = gsap.context(() => { gsap.from(elementToAnimate, { duration: 0.55, translateY: 70, opacity: 0, ease: 'power.out', scrollTrigger: { trigger: elementToAnimate, toggleActions: toogleActions ? toogleActions : 'restart reverse restart reverse', start: 'top 90%', end: 'bottom 10%', }, }); }); return () => context.revert(); } }, [elementToAnimate]); The "another" animation(the important part of the code below is that it sets it's markers by the horizontalBorderToAnimate which is initialy offset by 70px since the "reveal" animation hasn't ran yet): useLayoutEffect(() => { const horizontalBorderToAnimate = horizontalBorderBottomRef.current; const verticalBorderToAnimate = verticalBorderRightRef.current; if (horizontalBorderToAnimate && verticalBorderToAnimate) { const customToggleActions = 'restart reverse restart reverse'; const context = gsap.context(() => { gsap.from(horizontalBorderToAnimate, { duration: 0.55, ease: 'power.out', width: '100%', scrollTrigger: { markers: true, trigger: horizontalBorderToAnimate, toggleActions: customToggleActions, }, }); gsap.from(verticalBorderToAnimate, { duration: 0.55, ease: 'power.out', height: '100%', scrollTrigger: { trigger: horizontalBorderToAnimate, toggleActions: customToggleActions, }, }); }); return () => context.revert(); } }, []); How should I fix this?