How to invalidate my scroll triggers

[NickWoodward]

Hi,

I've a scroll trigger whose start and end point (I think) are being messed up by a slider in a child component that doesn't load immediately (image 1)

I've found the onload callback for the slider, and usee react context to notify the parent with the scrolltrigger animation that the slider has loaded and that it should recalculate the trigger points.

Looking at the docs, that looks like the `invalidate()` method. But I'm slightly confused where to call it.

A useEffect with an `isLoaded` dependency means I can't access the timeline. If I put `isLoaded` as a dependency of the useGSAP hook, I'm not sure where to call `invalidate`, and using `invalidateOnRefresh` doesn't seem to work as I mistakenly expect.

Just wondering if someone could let me know what I'm missing please? https://codesandbox.io/p/sandbox/ps52kk

  const { isLoaded } = useSliderContext();

  const containerRef = useRef(null);
  useGSAP(
    () => {
      // setTimeout(() => {
      gsap.utils.toArray<Element>(".section").forEach((section) => {
        const tl = gsap.timeline();
        ScrollTrigger.create({
          trigger: section,
          start: "top center",
          end: "bottom center",
          markers: true,
          animation: tl,
          toggleActions: "play reverse play reverse",
        });
      });
      // }, 2000);
    },
    { scope: containerRef, dependencies: [isLoaded] }
  );

  // useEffect(() => {
  //   if (isLoaded) console.log("isLoaded");
  // }, [isLoaded]);

Thanks

[GreenSock]

If I understand your question correctly, you don't need invalidate() or invalidateOnRefresh at all - simply call ScrollTrigger.refresh() when the content has finished loading (and the layout is done shifting around). That's it! 

 

From a quick glance, it looks like you're waiting for the "created()" function to fire in useKeenSlider(), but I think that gets called BEFORE the page updates/renders with the subloaded images. I'm not at all familiar with Keen Slider, but you may need to wait for updated() instead of created(). 🤷‍♂️

 

I'm also confused about why you created an empty timeline and added it to the ScrollTrigger as its animation. Is that just for this simplified demo, but in your real project you inserted animations into the timeline? 

 

 

[NickWoodward]

Hi Jack, thanks for the reply!
 

14 hours ago, GreenSock said:

If I understand your question correctly, you don't need invalidate() or invalidateOnRefresh at all - simply call ScrollTrigger.refresh() when the content has finished loading (and the layout is done shifting around). That's it!

14 hours ago, GreenSock said:

From a quick glance, it looks like you're waiting for the "created()" function to fire in useKeenSlider(), but I think that gets called BEFORE the page updates/renders with the subloaded images. I'm not at all familiar with Keen Slider, but you may need to wait for updated() instead of created().

 

Haha, amazing. I had `st.refresh`, not `ScrollTrigger.refresh`.

And thanks for pointing out the created/updated difference, definitely useful to know as I'm not that familiar with this slider too. Weirdly `updated` doesn't run after the images load either, but I'm using it anyway with a function that waits for the images to load, just in case keen-slider uses it internally 🤷‍♂️
 

14 hours ago, GreenSock said:

Is that just for this simplified demo,

It is, yes
In case anyone reads this in the future, here's the working version: https://codesandbox.io/p/sandbox/ps52kk

Thanks again for the help!