[Can I run my animation again if a class hasn't been added yet? (Using Locomotive Scroll & Splitting.js)]

Firstly, ❤️ this! Secondly... wish I was better at it

 

I'm using Locomotive scroll and Splitting.js which chunks up my text into spans, ready to animate. Great stuff. Locomotive scroll adds a is-inview class when a div is entering the viewport making it the perfect opportunity to start my GSAP animation so you get a word after a word effect as it enters the viewport.

 

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

if (document.querySelector("[data-splitting]")){

       gsap.from('.is-inview .char', { duration: .5, ease: "power2.out", opacity: 0, y: '50%' , delay: 20, stagger: .005 }) 

}

On page load, Locomotive adds this is-inview class to everything above the fold so the animation above ^ works perfectly, However, GSAP has now run and finished so when I scroll down the page the letters don't animate in one after the other. They are just visible. You can see it's nested above .is-inview .char so whenever .is-inview is applied .char does it's thing - like it does initially on page load.

 

I don't want to repeat (as in once you've scrolled past it, it shouldn't animate out and in again) so the repeat option for GSAP doesn't seem right - do you know how else can I achieve this? I almost need it to keep checking to see if .is-inview is applied and then if it is, run it again to everything that hasn't already run. I just can't get my head around that part 😕 Boooo! 

 

I saw a post on here that mentions scrollTrigger but this blows my CPU when I querySelectorAll(".char"). The page might have a lot of these spans. 

 

const sections = document.querySelectorAll(".char");

sections.forEach((section) => {
  gsap.to(section, {
    scrollTrigger: {
      trigger: section,
      markers: true,
      start: "top center"
    },
    borderTopLeftRadius: 0,
    borderTopRightRadius: 0,
    duration: 1
  });
});

A h2 on my site when all the JS has compiled for Locomotive & Splitting for example looks like this -if it's any help

 

<h2 class="c-heading -h2 words chars splitting is-inview" data-splitting="" data-scroll="data-scroll" data-scroll-offset="500" style="--word-total:1; --char-total:9;">
  <span class="word" data-word="eCommerce" style="--word-index:0;">
    <span class="char" data-char="e" style="--char-index:0;">e</span>
    <span class="char" data-char="C" style="--char-index:1;">C</span>
    <span class="char" data-char="o" style="--char-index:2;">o</span>
    <span class="char" data-char="m" style="--char-index:3;">m</span>
    <span class="char" data-char="m" style="--char-index:4;">m</span>
    <span class="char" data-char="e" style="--char-index:5;">e</span>
    <span class="char" data-char="r" style="--char-index:6;">r</span>
    <span class="char" data-char="c" style="--char-index:7;">c</span>
    <span class="char" data-char="e" style="--char-index:8;">e</span>
</span>
</h2>

 

Appreciate any guidance - Thanks!