Jump to content
Search Community

Problem: Delay property not working with SrollTrigger.

CommonUser test
Moderator Tag

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

  • 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

 

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

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

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...
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.
×
×
  • Create New...