How to correctly add a stagger to a timeline

[stefanobartoletti]

Hi, I'm trying to add a stagger to a timeline that includes ScrollTrigger.

It already works fine, adding a smooth animation when each of the affected elements enter the viewport.

 

I need to add a little delay to each element, so that when in example I have a grid with three elements aigned horizontally, they don't animate in at the same time, but each is slightly delayed from the previous.

 

I tried to add a stagger property, but it does not seem to affect anything.

 

// --- Imports ---

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// --- Animation ---

const gsapParallaxY = () => {
  const elements = document.querySelectorAll('[gsap-animation="parallax-y"]');

  elements.forEach(function (element) {
    const tl = gsap.timeline();

    tl.from(element, {
      y: '10vh',
      autoAlpha: 0,
      ease: 'power2.out',
      duration: 10,
      stagger: 0.5, // <-- everything works except this
      scrollTrigger: {
        trigger: element,
        start: 'top 100%',
        end: 'top 60%',
        scrub: 2.5
      }
    });

    return tl;
  });
};

// --- Exports ---

export { gsapParallaxY };

 

Can someone help me with this?

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @StefanoB Welcome to the forum!

 

I have a few notes, but it is really hard to debug without a minimal demo, because we can only see 1/3 of the code needed (we're missing the CSS and HTML).

 

With a  forEach loop all you ever get is one element and staggering one element has no effect. Side note you should also never animate your ScrollTrigger trigger! And instead of giving each tween a ScrollTrigger add ScrollTrigger to your timeline!

 

What I like to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

Here is some pseudo code that hopefully points you in the right direction, if not please post a minimal demo and someone will surely help you out!

 

//elements.forEach(function (element) { // 🗑 Remove me
const tl = gsap.timeline({
  scrollTrigger: { // Add ScrollTrigger to the timeline, not each individual tween
    trigger: ParentElement, // Never animate the element which is also you trigger!
    start: 'top 100%',
    end: 'top 60%',
    scrub: 2.5
  }
});

tl.from(elements, { // Animate all your elments if you want to have a stagger.
  y: '10vh',
  autoAlpha: 0,
  ease: 'power2.out',
  duration: 10,
  stagger: 0.5, // <-- everything works except this
});
//});// 🗑 Remove me

 

[stefanobartoletti]

Thank you guys, I've put up a minimal setup on Codepen, here it is 

See the Pen vYjqpgZ by stefanobartoletti (@stefanobartoletti) on CodePen

 

Sorry for not having provided one before

 

Basically I want each element of every to not start their animation together.

 

Also @mvaneijgen thanks for your suggestions, I'll try to implement something like that and see if it works in my case.

[mvaneijgen]

@StefanoB thanks for the demo, yeah my setup would work, but you can also look in to .batch()

 

See the Pen NWGPxGZ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Good luck and happy tweening!

[stefanobartoletti]

Thanks,the batch seems to be solving my issue, I'm still tweaking it but looks like the right tool for me.