Search the Community

Hi everyone, First of, I wanted to say that I recently became a premium member of GSAP Club, which is pretty exciting and nice Now to the issue. I am using GSAP in NextJS project. The video at the bottom of the post pretty much sums it up, if I scroll to the ScrollTrigger trigger element that has a scrub true and stop halway or more (as long as screen is still "inside" the element) and then hit refresh in the browser, the animated element jumps into abyss (I think it jumps back to the top of the trigger element / it's parent element). And then if I scroll in ANY direction, the element comes into the view and gets pinned correctly.. until I refresh the page again. Now, I know for sure that I am doing something wrong and it is most likely extremely obvious or just some react thing that I completely missed, but I did try a few things that just didn't work for me I hope someone knows exactly what this is but if not, I will probably have to make some minimal demo.. As I said, I did try couple of things and I searched the forums, but no success. Component code: import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; const PromoVideoElement = () => { const videoContainerRef = useRef<HTMLDivElement>(null); useGSAP( () => { const videoContainer = videoContainerRef.current; if (!videoContainer) return; const video = videoContainer.querySelector("video"); if (!video) return; gsap.to(video, { scale: 1, scrollTrigger: { trigger: videoContainer, start: "-=100 top", end: "200% top", pin: true, scrub: true, }, }); }, { scope: videoContainerRef }, ); return ( <div ref={videoContainerRef} className="aspect-3/2 mx-auto mb-56 mt-56 block w-[81%]" > <video data-cursor-size="100px" data-cursor-icon="play" data-cursor-icon-color="#352f36" data-cursor-color="white" controls={false} autoPlay muted preload="metadata" loop className="w-full scale-[1.4] rounded-3xl" > <source src={"/promo-video-homepage.mp4"} type="video/mp4" /> </video> </div> ); }; export default PromoVideoElement; IMPORTANT NOTE: I tried adding invalidateOnRefresh: true inside ScrollTrigger, but that didn't help. Thank you very much for your help! EDIT: Guys, I am very very sorry, while waiting for an answer I came to realization that I was using a custom gsap provider that I made, where I wrapped all elements and animated them on load, I also wrapped this component in page.tsx, which caused this problem. I have been brainstorming about this for so long only for me to ralize how stupid of mistake I made. Please close this thread as solved. Sorry once again.

Hello everyone!? I’m looking for solutions how could stop playing animation on the page refreshes? So, in demo the animation of text works correctly if you set counter to the max value animation is showing with gsap animation. But if you refresh page the animation keep playing. I tried to add flags in localStorage, but this is just stop any animations also I tried the flags as state and add timeline.revert() at the start of load and then make it as .play(). Could anyone to advise something , please? Please, look into this: minimal demo. Thanks a lot! Hideakimaru