Problem: Delay property not working with SrollTrigger.

[CommonUser 1 Likes (Newbie)]

Hello,

 

The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far.

 

Thank you,

 

Julius

[mikel 4,782 Likes (Superhero)]

Hey @CommonUser,

 

If you need some help, please provide a minimal demo in CodePen 

so that we can see things in context.

We'd be happy to help, but it's tough without any demo.

 

Thanks ...

Mikel

[ZachSaucier 7,162 Likes (Superhero)]

Hey CommonUser and welcome to the GreenSock forums.

 

The timing of the animation is completely controlled by the ScrollTrigger if you set a scrub which I presume you did in this case. It doesn't make much sense to have a delay and scrub: true. If you want each update to take a bit then set scrub to a number like scrub: 1. To add blank space to a ScrollTrigger that has a scrub value, add an empty tween where you want the space. This is covered more in the most common ScrollTrigger mistakes article.

[CommonUser 1 Likes (Newbie)]

@ZachSaucier

 

Thank you, it works now. Great to see how fast and well the forum system works. 

 

Sincerely,

 

Julius

[Akufeninc 2 Likes (Newbie)]

Hello,

Following up on this thread, the delay property with scrollTrigger is not working, or I can't seem to wrap my head around how to make it work.

Here's a super simple demo showing the issue :

See the Pen xxgXpJq by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen

I want my div to animate itself with a 5 seconds delay after it is triggered in the view with scrollTrigger.

No "scrub" property involved here, and I don't want any.

Thanks!
Max

[akapowl 5,482 Likes (Superhero)]

 

Hello, Max.

 

Your delay variable returns a string - you might want to parseInt() it to get a number instead - which then works quite alright.

 

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

 

[Akufeninc 2 Likes (Newbie)]

Nice, thanks for your help @akapowl

On the same topic, I am also having the same issue when I want to stagger elements with a delay...

Even though the delay variable is hardcoded, the delay is not taken into consideration.

Please see here :

See the Pen jOyGxPQ by MaxVeilleuxMTL (@MaxVeilleuxMTL) on CodePen

[akapowl 5,482 Likes (Superhero)]

 

Yeah, although I remember something similar from a different thread, I don't remember which thread that was, so I can't tell you more about that.

 

Maybe @GreenSock can chime in though.

 

Edit: My pen suggesting a different setup was actually not helpful at all because it was totally faulty - so I deleted it.

[PointC 14,465 Likes (Superhero)]

Yeah - that's a bit odd. @GreenSock will need to chime in on this one I think. If I add reset to toggleActions for onLeaveBack, the second time you scroll up, the delay works, but not on the first trigger hit. 🤔

 

See the Pen 8c1cc68c1c7eb2399cbb723d7e4501c0 by PointC (@PointC) on CodePen

[Bornfight 1 Likes (Newbie)]

Can confirm that delay is not working with scrolltrigger
gsap 3.6.1

delay not working both hardcoded value or props

typeof delay is number

@GreenSock any luck with fix maybe?
my react implementation is:
 

useEffect(() => {
    gsap.to(revealElements.current, {
        scrollTrigger: {
            trigger: revealElements.current || '',
            start: 'top 90%',
            toggleActions: 'play none play none',
            scrub: false,
            markers: false,
        },
        autoAlpha: 1,
        y: 0,
        duration: 1.3,
        delay: delay || 0,
        ease: 'customDefault',
    });
}, [delay, revealElements]);

 

[PointC 14,465 Likes (Superhero)]

2 hours ago, Bornfight said:

@GreenSock any luck with fix maybe?

Jack is on the road at the moment. I'm sure he'll have an answer and/or fix for us when he's available again. Stand by and thanks for your patience.

 

[GreenSock 18,876 Likes (Superhero)]

Very tricky one to hunt down, but I believe it's fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

It would only affect tweens that have a delay and a stagger and a ScrollTrigger

 

Does that version work better for you? 

[PointC 14,465 Likes (Superhero)]

Looks like somebody is back in front of their keyboard.

 

[Michal_Ant 0 Likes (Newbie)]

Hey! Got the same problem with delay not working with ScrollTrigger and React, just like @Bornfight has discribed. Is there any chance that version 3.6.2 will appear on NPM ? I'd like to be consistent and stick to using modules. Cheers!

[GreenSock 18,876 Likes (Superhero)]

@Michal_Ant sure, for now you can npm install this .tgz file (beta): https://assets.codepen.io/16327/gsap-beta.tgz

[Michal_Ant 0 Likes (Newbie)]

Thanks for super fast response! 

I just installed the package and tested it. 

Now it works, but still have issues with certain toggleActions values

 

function Component({delay}){

  const target = useRef()

   useEffect(()=>{
      gsap.registerPlugin(ScrollTrigger)
      gsap.to(target.current, {opacity: 1, visibility: 'visible', y:0, duration: 1, delay: delay,  scrollTrigger: {
          trigger: target.current, 
          start: "top 90%",
          toggleActions: "play none none none",  // this works perfectly
          //toggleActions: "restart none none none", // this doesn't delay animation
      }})
    },[])
  return(
  <ContainerAnimated ref={target}>
    // ... other child components
  </ContainerAnimated>
  )
}

 

Would be greatful for any hint

 

*edited: delay value is comming from props and it is a number

[GreenSock 18,876 Likes (Superhero)]

Yeah, when you call restart() on an animation, it doesn't factor in the delay - it restarts it right away unless you specify the includeDelay parameter (boolean). But now that I think of it, I believe it'd be most intuitive for ScrollTrigger to include it so I'll add that to the next release as well. You can use that same beta link to get it. 

 

Of course another option is to basically do your own toggleActions like:

// OLD
gsap.to(target.current, {opacity: 1, visibility: 'visible', y:0, duration: 1, delay: delay,  scrollTrigger: {
    trigger: target.current, 
    start: "top 90%",
    toggleActions: "restart none none none"
  }
});

// NEW
const anim = gsap.to(target.current, {opacity: 1, visibility: 'visible', y:0, duration: 1, delay: delay});
ScrollTrigger.create({
  trigger: target.current, 
  start: "top 90%",
  onEnter: () => anim.restart(true)
});

 

[Michal_Ant 0 Likes (Newbie)]

Thanks for help and explanation. Very appreciate!

[DannyAgent 0 Likes (Newbie)]

Hi, I'm having this issue with version 3.10.4.

 

When scrollTrigger is triggered immediately on the page, the delay property does not work. When the trigger is executed on enterBack, the delay does work.

 

Any ideas?

[DannyAgent 0 Likes (Newbie)]

1 minute ago, DannyAgent said:

Hi, I'm having this issue with version 3.10.4.

 

When scrollTrigger is triggered immediately on the page, the delay property does not work. When the trigger is executed on enterBack, the delay does work.

 

Any ideas?

 

 

Sorry, literally a minute after submitting this I have found what causes it. If using "invalidateOnRefresh:true" on the scrollTrigger, the delay does not work as stated above. I removed this property from scrollTrigger and the delay now works. Not sure if this is intended behaviour or not.

 

Thanks.

[GSAP Helper 122 Likes (Specialist)]

Hm, it's pretty tough to troubleshoot without a minimal demo - 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.