play/reverse tween with ScrollTrigger

[_Greg _]

Hi!

How can i use links (like navigation) to play/reverse tween and scroll to trigger position, tween must be played/reversed with scrolltrigger or on click button

I think something like window.scrollTo(trigger-start/end position) but I can't figure out how to calculate the position of triggers

Thank you!

See the Pen NWxjmoj by -greg- (@-greg-) on CodePen

[ZachSaucier]

Hey Nekiy2. I recommend using the ScrollToPlugin because it makes it easier and gives you more control over the scroll animation. Here's a basic demo showing how it can be paired with ScrollTrigger (it's listed in the ScrollTrigger docs)

See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen

 

If you need to go to some point within a timeline based on a label I show how to do that in this thread:

 

[_Greg _]

Thank you!

On 

i find that i can get start and end position of trigger. Thats what i need
I update my codepen with

document.querySelector('.nav').addEventListener('click', ()=>{
  
  if(img.progress() === 0){
    img.play()
    window.scrollTo(0, scrt.start + (scrt.end - scrt.start)) // Scroll to trigger
  }else{
    img.reverse()
    window.scrollTo(0, scrt.start)// Reverse to start
  }
})

I think its working how i want