astro Astro viewtransitions breaks ScrollTrigger the second time I enter a page.

July 5, 2024

Hi, this is my first question. I'm new to both gsap and astro js.

Im currently using ScrollTrigger to change the body function each time I reach a specific section. This is in my homepage, and I use <viewTransition/> from Astro. The thing is when I go to /blog and then come back, this scrolling behavior is not there.

  import { gsap } from "gsap";
  import { ScrollTrigger } from "gsap/ScrollTrigger";
  gsap.registerPlugin(ScrollTrigger);

  const isBlackMode = (element: Element) => element.classList.contains("dark");

  const generateAnimations: (
    isDarkMode: boolean
  ) => globalThis.ScrollTrigger[] = (isDarkMode) => {
    return gsap.utils.toArray("section").map((elem) => {
      let color =
        (elem as Element).getAttribute(
          isDarkMode ? "data-color-dark" : "data-color"
        ) ??
        (elem as Element).getAttribute(
          !isDarkMode ? "data-color-dark" : "data-color"
        ) ??
        "#fff";

      return ScrollTrigger.create({
        trigger: elem as Element,
        start: "top 50%",
        end: "bottom 50%",
        onEnter: () =>
          gsap.to("body", {
            backgroundColor: color,
            duration: 1,
          }),
        onEnterBack: () =>
          gsap.to("body", {
            backgroundColor: color,
            duration: 1,
          }),
      });
    });
  };

  // Observer for the <html> element, in case there is a class name change
  const htmlElement = document.getElementsByTagName("html")[0];
  let currentModeIsBlack = isBlackMode(htmlElement);

  //To cancel the animations when there is a theme change
  let backgroundColorAnimations: globalThis.ScrollTrigger[] =
    generateAnimations(currentModeIsBlack);
  const observer = new MutationObserver((mutationsList, observer) => {
    for (let mutation of mutationsList) {
      if (
        mutation.type === "attributes" &&
        mutation.attributeName === "class"
      ) {
        if (currentModeIsBlack === isBlackMode(htmlElement)) continue;
        currentModeIsBlack = !currentModeIsBlack;
        backgroundColorAnimations.map((animation) => animation.kill());
        backgroundColorAnimations = generateAnimations(currentModeIsBlack);
      }
    }
  });
  const config = { attributes: true, attributeFilter: ["class"] };
  observer.observe(htmlElement, config);
  document.addEventListener("astro:before-preparation", () => {
    backgroundColorAnimations.map((animation) => animation.kill());
  });

The last eventListener is added to remove the animations, otherwise when I visit /blog in light mode the navbar doesn't change to de "dark:" classes in tailwind. This behavior doesn't replicate when I visit /blog being in dark mode.

I'd really appreciate any hint

July 6, 2024

Hi @valentintt and welcome to the GSAP Forums!

We've seen a few issues with Astro's view transitions and there is clearly something that is happening in the way Astro view transitions work that is not properly cleaning up.

Unfortunately I don't have any experience with Astro and I haven't been able to get up-to-speed with it in order to play around with the view transitions API and see how to integrate it seamlessly with GSAP. Doing a quick check on Astro's API I found this:

https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap

I would recommend you to revert all your GSAP and ScrollTrigger instances of the current view and use the page-load event to create your GSAP and ScrollTrigger instances in the new view:

https://docs.astro.build/en/guides/view-transitions/#astrobefore-swap

For doing all this in a simpler way I recommend you to use GSAP Context:

https://gsap.com/docs/v3/GSAP/gsap.context()

Hopefully this helps.

Happy Tweening!

Notifications

Messages

astro Astro viewtransitions breaks ScrollTrigger the second time I enter a page.

Recommended Posts

valentintt

Rodrigo

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members