ScrollToPlugin in a timeline ?

[tibo78]

Hello,

 

Is ScrollToPlugin supposed to work in a timeline?

 

I tried but when it gets to the scrollTo function, it just scrolls a bit (approx 60vh below), so not as indicated (target is to the next section, which is 100vh below) even if I change the target of the scrollTo (e.g. a section which is further below) it moves/scroll just a bit to the same location. As soon as I exclude the scrollTo from the timeline it scrolls where it supposed to (to #section-4-10).

 

let tg = gsap.timeline({scrollTrigger: {
        trigger:"#div_block-2-10",
        toggleActions: "play pause resume reset",
       
tg.from("#div_block-2-10", {duration: 3, ease: "back", x:-1500, rotate:-360});
tg.to("#div_block-2-10", {repeat:1, ease:'linear', duration:2, rotateY:360,});
tg.to("#div_block-2-10", {duration: 1.5, ease: "linear", x:1500, rotate:360});
tg.to(window, {duration: 2, scrollTo: {y:"#section-4-10", autoKill:true}, ease:"power4"});

 

I also tried with Snap (snapTo: 1) but same behavior, it just just scroll a bit (at the exact same location whereas the scrollTo is actually stopping) instead of the intented behavior.

 

Thanks

 

Thibaut

[Carl]

Yes, scrollTo plugin can work fine in a timeline.

 

However, you also have a ScrollTrigger on the timeline with toggleActions that tell that same timeline to pause when the trigger area leaves. 

 

In short, you are creating a logical impossibility.

 

if ScrollTrigger pauses the timeline onLeave, how can the last tween that has the scrollTo settings ever play? 

 

See problem?

 

You may want to put your scrollTo behavior in tween that gets fired in an onComplete callback that gets fired when the timeline completes. Still, it sounds a bit awkward to have the user scrolling to trigger the animation and then have the page try to automatically scroll somewhere else.

 

If you need more help with this, please provide a minimal demo.

[tibo78]

Clear, thank you !