Use Scroll Trigger to split text on page scroll with different background colors

[Lopdog]

Greetings all!

 

I'm a scripting noob-uh that needs some guidance. I have the animation up and running for all-black text on a white background.

 

I need to do the same for white text on a black background. Below is what I have so far. Any help in understanding the script needed to make this work is greatly appreciated.

 

The website.

 

gsap.registerPlugin(ScrollTrigger);

const splitTypes = document.querySelectorAll(".text-split");

splitTypes.forEach((char, i) => {
	const bg = "#F1F1F1";
	const fg = "#000000";

  const text = new SplitType(char, { types: "chars" });
  
  // Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
  if (windowWidth !== $(window).innerWidth()) {
    windowWidth = $(window).innerWidth();
    typeSplit.revert();
    runSplit();
  }
});

  gsap.fromTo(
    text.chars,
    {
      color: bg
    },
    {
      color: fg,
      duration: 1,
      stagger: 1,
      opacity: 1,
      scrollTrigger: {
        trigger: char,
        start: "top 80%",
        end: "top 35%",
        scrub: true,
        markers: false,
        toggleActions: "play play reverse reverse"
      }
    }
  );
});

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates 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. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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. ✅

[Lopdog]

Gotcha, thanks for the help. 

 

Hopefully, this works.

 

See the Pen XWGvjxW by Lopdog (@Lopdog) on CodePen

[Lopdog]

Figured it out. Below is for anyone who wants any text to animate, regardless of color.

 

gsap.registerPlugin(ScrollTrigger);

const splitTypes = document.querySelectorAll('.text-split');
splitTypes.forEach((char,i) => {
  const text = new SplitType(char, {types: ['chars','words']});
  gsap.from(text.chars, {
    scrollTrigger: {
      trigger: char,
      start: 'top 80%',
      end: 'top 20%',
      scrub: true,
      markers: false
    },
    opacity: 0.2,
    stagger: 0.1,
  })
});

 

[mvaneijgen]

Hi @Lopdog welcome to the forum!

 

Glad to hear you've solved your issue. It is almost always the case that as soon as people make a minimal demo they probably solve there own issue. Great skill to have as a developer btw! 

 

If you in the future walk against the limits of your splitten text plugin, I highly recommend taking a look at our SpiltText plugin (https://gsap.com/docs/v3/Plugins/SplitText/) , which is really robust and works great in collaboration with GSAP, again welcome to the forum and happy tweening!