cmp109

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!