Jump to content
Search Community

Is there anyway to add delay to scrollTrigger?

Preet Sojitra test
Moderator Tag

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

  • 7 months later...

Hi Preet, try playing around with easing. Hope that helps! https://greensock.com/docs/v3/Eases

useEffect(() => {

    gsap.to(changeBg.current, {

      scrollTrigger: {

        trigger: changeBg.current,

        markers: true,

        scrub: 0.5,

        start: "top 10%",

        end: "bottom 90%",

      },

      backgroundColor: "black",

      ease: "power4.in" // Add this line 👍

    })

  })

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