Jump to content
Search Community

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

terroarr test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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%",
        }),

    });

 

 

 

Link to comment
Share on other sites

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
    });
  }
});

 

  • Like 3
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...