ScrollTrigger issue - page refresh issue at halway of scrubbed ScrollTrigger element

[MarkoM]

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.

 

[Rodrigo]

Hi,

 

Is great to hear that you were able to track it down and solve it 🥳

 

We'll mark the thread as solved 👍

 

Happy Tweening!