claudiugubernu

Hey Rodrigo, Many many thanks for pointing that out. I already had an appContext that was passing state through so adding a new state to keep track of the transition was easy enough to do. Code for my transition group: <div className="relative"> <TransitionGroup className={transitionState ? "transitioning" : ""} component={null} > <CSSTransition key={route} classNames="page" timeout={1000} onEnter={() => { playTransition(); setTransitionEnded(false); }} onExited={() => { stopTransition(); setTransitionEnded(true); }} > <MainComponent routingPageOffset={routingPageOffset}> <SecondaryComponent className="page-transition-inner"> {children} </SecondaryComponent> </MainComponent> </CSSTransition> </TransitionGroup> </div> And on the block itself: // Context import import { AppBackgroundContextState } from "../../context/AppBackgroundContextProvider"; // Context use const { transitionEnded } = AppBackgroundContextState(); // Adding gsap.context useLayoutEffect(() => { const ctx = gsap.context(() => { if (transitionEnded) { const tl = gsap.timeline({ scrollTrigger: { trigger: imageFrontRef.current, start: "center center", pin: imagesContainer.current, pinSpacing: false, pinnedContainer: imagesContainer.current, endTrigger: divRef.current, end: "bottom bottom", scrub: 1, markers: true, }, }); tl.to(imageFrontRef.current, { opacity: 1, }) .to(imageBehindRef.current, { opacity: 0, }) .to(imageBehindRef.current, { opacity: 1, }); } }); return () => ctx.revert(); }, [transitionEnded]); Again, thank you for your support Best, Claudiu

Nice point of view. will do that and mark it as the solution once i am done. Thank you !

Hi, I have now updated my codesandbox to have the same page transition as my current project and the markers are now way off. Thanks for having a look.

I do have something that in my codesandbox example is not added, and that is a page transition. I wonder if that might have anything to do with it. Will give it a go and do a production-ready app to see the outcome. Thank you

Hi Rodrigo, Thank you so much for that. While this works on my codesandbox, when i added it into my project it doesn't work. That if check never passes. I've added a setTimeout instead but not sure how reliable is that. useLayoutEffect(() => { const ctx = gsap.context(() => { setTimeout(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: imageFrontRef.current, start: "center center", pin: imagesContainer.current, pinSpacing: false, pinnedContainer: imagesContainer.current, endTrigger: divRef.current, end: "bottom bottom", scrub: 1, markers: true, }, }); tl.to(imageFrontRef.current, { opacity: 1, }) .to(imageBehindRef.current, { opacity: 0, }) .to(imageBehindRef.current, { opacity: 1, }); }, 2000); }); return () => ctx.revert(); });

Hi both, Thank you for your quick reply. To answer to Jack i have pinned that same element because i want the scroll trigger to start when the whole image is in view and that seemed to me like the best way to achieve it. (a beginner move maybe?) @Rodrigo I have tried your solution but no luck. I Have added it to my codesandbox added originally. Regards

I have made a codesandbox with the issue. https://codesandbox.io/p/sandbox/summer-sun-fy0rxk?file=%2Fpages%2Fabout.tsx&selection=[{"endColumn"%3A47%2C"endLineNumber"%3A20%2C"startColumn"%3A47%2C"startLineNumber"%3A20}]&workspace=%7B%22activeFileId%22%3A%22cl9fjfo0o008p3b6hl7ovb81j%22%2C%22openFiles%22%3A%5B%22%2FREADME.md%22%2C%22%2Fpages%2Findex.tsx%22%2C%22%2Fpages%2Fabout.tsx%22%2C%22%2Fsrc%2Fcomponents%2FScrollRevealImageBlock.js%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22sidekickItems%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22cl9fj96x3000k3b6hj0t93hgl%22%2C%22isMinimized%22%3Afalse%2C%22path%22%3A%22%2F%22%7D%5D%7D

Hi, I am using GSAP for a NetxJS project and I am having an issue with the positioning of my markers when I change the route. I tried to use the refresh() function when the routeChangeStart has occurred but that doesn't seem to be doing anything. If I manually refresh the page then my markers are set correctly. import Image from "../atoms/Image"; import Paragraph from "../atoms/Paragraph"; import { useRef, useEffect } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import { useRouter } from "next/router"; gsap.registerPlugin(ScrollTrigger); const ScrollRevealImageBlock = ({ text, src, fallbackSrc, src2, fallbackSrc2, }) => { const divRef = useRef(null); const imageFrontRef = useRef(null); const imageBehindRef = useRef(null); const imagesContainer = useRef(null); useEffect(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: imageFrontRef.current, start: "center center", pin: imagesContainer.current, pinSpacing: false, pinnedContainer: imagesContainer.current, endTrigger: divRef.current, end: "bottom bottom", scrub: 1, markers: true, }, }); tl.to(imageFrontRef.current, { opacity: 1, }) .to(imageBehindRef.current, { opacity: 0, }) .to(imageBehindRef.current, { opacity: 1, }); }); // when the route(page) changes re-run the scrollTrigger so the markers align properly const router = useRouter(); useEffect(() => { const pageChanged = () => { console.log("refreshed"); ScrollTrigger.refresh(); }; router.events.on("routeChangeStart", pageChanged); }, [router.events]); return ( <div ref={divRef} className="scroll-reveal-image-block"> <div className="left-container site-width w-100 flex justify-end"> {text && <Paragraph content={text} />} </div> <div ref={imagesContainer} className="right-container"> <div ref={imageFrontRef} className="image-front image"> <Image src={src} fallbackSrc={fallbackSrc} /> </div> <div ref={imageBehindRef} className="image-behind image"> <Image src={src2} fallbackSrc={fallbackSrc2} /> </div> </div> </div> ); }; export default ScrollRevealImageBlock; Many thanks, Klaus