Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Amanda

Trigger TweenTo on Scroll

Recommended Posts

Hi,

 

I've created a timeline and tweento buttons that are working as I have hoped. 

 

What I also need to happen isa scroll to trigger the same as the click function. 

 

For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. 

$("#two2").click(function(){
   tl1.tweenTo('slide2');
});

Any pointers much appreciated. 

 

Thanks!

See the Pen NNGKYE by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

Hi ald603  :)

 

you can use something like this : 

See the Pen MyaWzm by MAW (@MAW) on CodePen

document.addEventListener("mousewheel",Go);
document.addEventListener("DOMMouseScroll",Go);

function Go(e){
    var Tl = tl1 , SD = e.wheelDelta || -e.detail ;
    if( SD>0 && Tl.getLabelBefore()!=null ){
        Tl.tweenTo( Tl.getLabelBefore() )
    }else if( SD<0 && Tl.getLabelAfter()!=null ){
        Tl.tweenTo( Tl.getLabelAfter() )
    };
};
  • Like 5
Link to comment
Share on other sites

Thank you so much! This is exactly what I meant. 

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