Refresh ScrollTriggers on scrollHeight update

[leroykorterink]

We're currently refreshing ScrollTrigger when an animation is updated but this updates ScrollTrigger unnecessarily. We should definitely update ScrollTrigger when the scrollHeight of the document changes.

import ScrollTrigger from 'gsap/ScrollTrigger';
import { useRef } from 'react';
import { useAnimationLoop } from './useAnimationLoop';

/**
 * This hook is used to refresh the ScrollTrigger instance when the page height changes.
 * This is necessary to ensure that all scroll positions are correct.
 */
export function useScrollTrigger(): void {
  const previousScrollHeight = useRef(
    typeof document === 'undefined' ? 0 : document.scrollingElement?.scrollHeight,
  );

  useAnimationLoop(() => {
    const currentScrollHeight = document.scrollingElement?.scrollHeight ?? 0;

    if (currentScrollHeight !== previousScrollHeight.current) {
      ScrollTrigger.refresh();
    }

    previousScrollHeight.current = currentScrollHeight;
  }, true);
}

[jesse-mm]

This function should be throttled as the ScrollTrigger.refresh() can be quite heavy. Also document.scrollingElement?.scrollHeight will trigger a layout every time raf gets called (if I'm not mistaken).

[VictorGa]

@leroykorterink Are we creating a new hook? How this interacts with useScrollAnimation?