Using ScrollTrigger to fire an anime animation when in view

[Phil Owen]

Hi, pretty new to GSAP and Scrolltrigger but really want to get familiar with it and use it going forward.

I'm trying to get spltjs text animating in on scroll with Scrolltrigger (Yes I know SplitText plugin exists but testing out external library functions with ST) but not having much luck.

Codepen:

 

See the Pen RwXKQvB by powen-cs (@powen-cs) on CodePen.

[Sahil]

@Phil Owen Issue is you are playing all animations when first scrolltrigger is triggered. Instead you need to loop through target areas and trigger animation for that specific area.

See the Pen PoMWeVJ?editors=0010 by SahilAFX (@SahilAFX) on CodePen.

[Phil Owen]

Hi Sahil

Ah, I get it, so setting the
 

for(var i = 0; i < heroText.length; i++){
  var target = heroText[i];

and then setting the target in ST then runs through each iteration from the above.  Thanks so much for your help!

[Anime Witcher]

You can definitely use GSAP’s ScrollTrigger to fire an anime.js animation when the element comes into view. The key is to hook into ScrollTrigger’s callbacks (onEnter, onLeave, etc.) and then trigger your anime.js timeline or animation inside them.

 

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  trigger: ".my-element",
  start: "top 80%", // adjust where you want it to fire
  onEnter: () => {
    anime({
      targets: ".my-element",
      translateY: [100, 0],
      opacity: [0, 1],
      easing: "easeOutExpo",
      duration: 1000
    });
  }
});
 

 

This way ScrollTrigger controls when the animation starts, and anime.js handles how it animates.
If you need the animation to replay when scrolling back up, you can also use onEnterBack.

[GreenSock]

@Anime Witcher just curious why you'd use anime for the animation if you're already loading GSAP anyway (and GSAP can do pretty much anything anime can do plus more). It's totally fine, of course, if someone wants to also load anime and use it with ScrollTrigger. I'm just curious about the reasoning.