ScrollTrigger.batch() - I want more of a delay before images fade in

[terroarr 0 Likes (Newbie)]

I'm using the code in the codepen to fade in images as you scroll, but it's happening way too early. As soon as the top of the next row of images appears it starts fading in. 

I tried adding a top/end but it didn't change anything.. Not sure what I'm doing wrong here, any help is appreciated. 

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

[akapowl 5,136 Likes (Superhero)]

Hello @terroarr

 

1 hour ago, terroarr said:

I tried adding a top/end but it didn't change anything

 

top is not a valid property - you might be looking for start?

 

...as it also says in a comment in the demo you posted:

 

// also most normal ScrollTrigger values like start, end, etc.

 

See the Pen YzezBRV by akapowl (@akapowl) on CodePen

[terroarr 0 Likes (Newbie)]

On 5/2/2022 at 5:17 PM, akapowl said:

Hello @terroarr

 

 

top is not a valid property - you might be looking for start?

 

...as it also says in a comment in the demo you posted:

 

// also most normal ScrollTrigger values like start, end, etc.

 

 

 

Thanks for the response.

I added what you suggested but I noticed I'm getting a warning in the console.
 

Quote

Invalid property start set to top 25% Missing plugin? gsap.registerPlugin()

Invalid property interval set to 0.1 Missing plugin? gsap.registerPlugin()

 

Any idea why this might be happening? I'm loading the latest gsap.min.js and also scrolltrigger.

 

 gsap.registerPlugin(ScrollTrigger);
   ScrollTrigger.update();

    ScrollTrigger.batch(".fade-in", {

      onEnter: (batch) =>
        gsap.to(batch, {
          interval: 0.1,
          autoAlpha: 1,
          stagger: 0.1,
          duration: 2,
          start: "top 25%",
        }),

    });

 

 

 

[GreenSock 18,264 Likes (Superhero)]

That's because you put the "start" and "interval" in the wrong place - you put them in the tween/animation as if those are literally properties that you want to animate. Maybe you meant to do this?:

ScrollTrigger.batch(".fade-in", {
  interval: 0.1,
  start: "top 25%",
  onEnter: (batch) => {
    gsap.to(batch, {
      autoAlpha: 1,
      stagger: 0.1,
      duration: 2
    });
  }
});