Jump to content

Preet Sojitra

Is there anyway to add delay to scrollTrigger?

Recommended Posts

I want to add delay to scrollTrigger, is there anyway to do so?


Here's code:


useEffect(() => {

    gsap.to(changeBg.current, {

      scrollTrigger: {

        trigger: changeBg.current,

        markers: true,

        scrub: 0.5,

        start: "top 10%",

        end: "bottom 90%",


      backgroundColor: "black",




I don't want to apply this animation as soon as it triggers, but instead want to apply after some time. Can I do that?

Link to comment
Share on other sites

How could that even work if you have a scrub value defined? Like...if the user scrolls to 50% into the ScrollTrigger's area, you want it to ignore that for a while and then suddenly scrub the animation to 50%? And then if they scroll more to 80%, do you again want the animation to stay stuck at 50% for a while, and then after a certain amount of time elapses, it scrubs to that 80%? And what happens if they scroll to 80%, the time elapses, and WHILE it is scrubbing, the user scrolls again? 


I mean I suppose you could disable scrub and do your own scrub tween inside an onUpdate, and apply a delay to that. Seems a bit odd though. It would definitely help if you provided a minimal demo so we can better understand this in context. 

  • Thanks 1
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.