Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_Greg _

play/reverse tween with ScrollTrigger

Recommended Posts

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

Link to comment
Share on other sites

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:

 

  • Like 2
Link to comment
Share on other sites

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

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