Jump to content
Search Community

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

cmp109 test
Moderator Tag

Recommended Posts

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";

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>


Appreciate any guidance - Thanks! 





Link to comment
Share on other sites

Welcome to the forums, @cmp109


Yeah, you definitely don't need to create a ScrollTrigger for every single character. I assume you just want to stagger in the letters when each <h2> enters the viewport. This is exactly what ScrollTrigger is made for. It would be terrible for performance if you had to check constantly for the "in-view" class. ScrollTrigger is way faster. 


See the Pen dyjxpVb?editors=0010 by GreenSock (@GreenSock) on CodePen


It looks like you're using various free 3rd party tools instead of GreenSock ones (like Splitting instead of SplitText and LocomotiveScroll instead of ScrollSmoother). That's fine, but we just can't really support those tools here since they're not GreenSock ones. Of course ScrollSmoother will seamlessly integrate with ScrollTrigger, so I'd highly recommend switching to that but of course it's a members-only benefit of Club GreenSock


If you still need some help, please make sure you provide a minimal demo (like a CodePen) so we can see the issue in context. 


Happy tweening!

Link to comment
Share on other sites

Hi @cmp109 and welcome to the GreenSock forums!


Thanks for the kind words, we really like when users appreciate working with GreenSock! 🥳


Without a minimal demo is really hard for us to know exactly what could be the issue, on top of that Locomotive is a third party library and we don't have the time resources to give support for it. But fear not because we do have an example for integrating it with ScrollTrigger:

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


GreenSock has it's own solution for smooth scrolling called ScrollSmoother:




2 hours ago, cmp109 said:

Secondly... wish I was better at it :(

Don't feel discourage about it. My advice (and probably everyone's advice who's been around GSAP for a while) stick around here in the forums, bookmark the docs page and the GreenSock codepen profile. Solving real life issues here in the forums is the best way to get traction with GSAP (it worked really well for me over 10 years ago ;)) and the whole HTML/CSS/JS stack. Before you notice you'll find yourself solving issues for other users and having animation superpowers.


Hopefully this helps. If you have more GSAP related questions let us know.

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...