Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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

 

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

 

  • Like 2
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

Thanks for help and explanation. Very appreciate!

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.

×