Splittext not reverting after resizing browser

[sammekekko]

Hello! I have recently encountered a problem where I am trying to revert the parent divs after a browser resize, but it is not reverting at all!

I am trying to revert the "paragraph-" and "headerParentSplit" before the animation starts (as long as it has been set before) I have tried debugging by console logging this if statement, and it does go through, although it still does no difference.

 

First picture with only one header line, is how it should look like. This is what happens when you enter the website with a fullscreen resolution. The other picture with a red and black background for the header, is how it looks like. The reason behind this is that the div is split into lines when the resolution was smaller (therfore it is two divs). It does not revert with the following code..

function setupSplits() {
  const paragraph = document.querySelectorAll("p");
  const header = document.querySelectorAll("h1, h2");

  if (headerParentSplit != null) {
    headerParentSplit.revert();
    paragraphParentSplit.revert();
  }

  var headerParentSplit = new $SplitText(header, {
    // type: "words",
    linesClass: "split-parent",
  });

  var paragraphParentSplit = new $SplitText(paragraph, {
    // type: "words",
    linesClass: "split-parent",
  });

  header.forEach((header) => {
    // Reset if needed
    if (header.anim) {
      header.anim.progress(1).kill();
      header.split.revert();
    }

    header.split = new $SplitText(header, {
      type: "lines,words",
      linesClass: "split-line",
    });

    // Set up the anim
    $gsap.set("h1, h2", {
      visibility: "visible",
    });

    header.anim = $gsap.from(header.split.words, {
      scrollTrigger: {
        trigger: header,
        toggleActions: "restart pause resume reverse",
        start: "top 95%",
      },
      duration: 0.7,
      ease: "circ.easeOut",
      yPercent: 100,
      opacity: 0,
      stagger: 0.015,
    });
  });

  paragraph.forEach((paragraph) => {
    // Reset if needed
    if (paragraph.anim) {
      paragraph.anim.progress(1).kill();
      paragraph.split.revert();
    }

    paragraph.split = new $SplitText(paragraph, {
      type: "lines,words,chars",
      linesClass: "split-line",
    });

    $gsap.set("p", {
      visibility: "visible",
    });

    paragraph.anim = $gsap.from(paragraph.split.words, {
      scrollTrigger: {
        trigger: paragraph,
        toggleActions: "restart pause resume reverse",
        start: "top 95%",
      },
      duration: 0.6,
      ease: "circ.easeOut",
      yPercent: 100,
      opacity: 0,
      stagger: 0.005,
    });
  });
}

onMounted(() => {
  setupSplits();
  $ScrollTrigger.addEventListener("refresh", () => {
    setupSplits();
  });
});

 

See the Pen BaMmoeG by sammekekko (@sammekekko) on CodePen.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

 

Also it would be helpful to look into GSAP Context in order to revert everything during the resize event, which ideally you should debounce:

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

[sammekekko]

See the Pen BaMmoeG by sammekekko (@sammekekko) on CodePen.

(Scroll down for the text)

This will recreate my issue, where if I on a smaller resolution run the script, the header will get split into two lines (therefore two divs). When I then rescale to a full screen size, the two divs are still there. I could not manage to get an update function in the codepen, because I am using nuxt and the rep i was looking for did not have splittext and scrolltrigger..

I think what I am missing is a proper debounce!
 

[Rodrigo]

Hi,

 

You can create a Nuxt demo using the GSAP Trial package in Stackblitz and localhost as well:

https://www.npmjs.com/package/gsap-trial

 

Here is a simple demo that uses ScrollSmoother, you can fork it or use it as a blueprint to create your own demo:

https://stackblitz.com/edit/nuxt-starter-q72fhs?file=app.vue

 

Hopefully this helps.

Happy Tweening!