Jump to content
GreenSock

CommonUser

Problem: Delay property not working with SrollTrigger.

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

@ZachSaucier

 

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

 

Sincerely,

 

Julius

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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. :)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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? 

  • Like 3
Link to comment
Share on other sites

Looks like somebody is back in front of their keyboard. :)

 

  • Haha 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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.
×