Pause timeline in an onComplete callback when tied to a ScrollTrigger

[jackkemm]

Hi there,

 

I am trying to create an animation where by the timeline only happens once when tied to a ScrollTrigger.

 

The idea is the timeline will scrub to a point in the timeline where there is an onComplete callback which should pause the timeline and not let it happen again in any direction unless the user refreshes their page.

 

I have tried killing/disabling the ScrollTrigger in this callback, but it causes a page shift to occur, plus I still need this section to pin even if the animation isn't scrubbing.

 

Any ideas on how I can stop the timeline from scrubbing once this onComplete callback runs?

 

I have attached a Codepen to hopefully give a better understanding of what i'm trying to achieve.

 

Thanks,

Jack

See the Pen QWZGGbX by jackkemm (@jackkemm) on CodePen

[mvaneijgen]

Hi @jackkemm have you seen the once property of ScrollTrigger? From the ScrollTrigger docs

 

 

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

 

If you still want it to pin (would be weird, because nothing would be happening anymore) use two ScrollTriggers one for pining and the other for the animation which has the once: true on it. Hope it helps and happy tweening! 

 

See the Pen dygOOZe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[jackkemm]

Hey @mvaneijgen,

 

You are a wizard. This looks to be the solution I am after 🤔 I did try once but maybe because it's the same ScrollTrigger and I was killing it I was having issues with the effect I am after.

 

I will give this a go and report back 👍

 

Thanks,
Jack

[jackkemm]

Hey @mvaneijgen can confirm that was the solution thank you. Threw it straight into my project and gave me the desired effect 👍

 

Thanks,

Jack