override timeline delay when using scrollTo

[greenchonies]

I have a timeline that is being controlled by a scrollTrigger scrub. There are delays on some of the tweens so that there are pauses as I scrub. I have some labels on some of the tweens that I want to access via some buttons on the page so I can click to scrollTo that position in the timeline. I have gotten this far, except I want to ignore the delays when using the scrollTo click. How can I set the delay to 0 only when using scrollTo? Example Codepen attached.

 

Sidenote, the scrollTo clicks ignore the delay when going backwards in the timeline. Yet the delays are present when scrolling backwards normally. Why is that?

See the Pen abMWLMa by fullstackali (@fullstackali) on CodePen

[Rodrigo]

Hi @greenchonies and welcome to the GSAP Forums!

I think this is more of a perception you have due to the default easing function in this event handlers and the fact of where you have positioned your labels more than anything else:

gsap.to(window, {
  scrollTo: tl.scrollTrigger?.labelToScroll("phase1Start")
});

That GSAP Tween basically is using the the default easing function (power1.out), which means it starts fast and ends slow. I created a fork of your demo using just the buttons to tween the timeline:

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

 

As you can see there is still some kind of delay, that's mostly because of where your labels are placed:

tl.addLabel("phase1Start");
tl.from("#phase2", { xPercent: 100, delay: defaultDelay });
tl.addLabel("phase2Start");
tl.from("#phase3", { xPercent: 100, delay: defaultDelay });
tl.addLabel("phase3Start");

Your first label is placed at 0 seconds but your first animation starts at 2 seconds, so when you click on the phase 2/3 buttons the animation has to go through those two seconds and only after that the second panel starts moving. The perception that there is no delay is because when you go back, the timeline's playhead is placed right after the panel animation has started. Let's say that you go from phase 2 to 1, at that point the timeline's playhead is at the phase2Start label position, so as soon as the timeline begins to go back the animation starts to reverse but the delay is still there, the thing is that the panel starts moving immediately and after the panel is gone the timeline playhead (which is still moving back) goes from 2 seconds to 0 second, so in your demo if you check you'll see that after the animation is completed the scrollbar is still moving when going back and when going forward the scrollbar is moving but no animation is happening, that's why I mention a perception.

 

Honestly I can't think of an easy solution for this. Right of the bat IDK if there is a way to alter the delay of timeline childs after they've been created/added to the timeline. I tried a few things in your demo but I can't get anything to work. Beyond removing the delays, which might not be what you want I don't know what to suggest.

 

Sorry I can't be of more asitance 😞

Happy Tweening!

[greenchonies]

Hi @Rodrigo, thank you for taking the time to explain this! I was hoping there would be some solution as I thought this would be a common necessity, to have pauses in a scrub timeline as you scroll, but to ignore those pauses when using scrollTo clicks.

 

I even tried creating a new variable that holds the delay value, then setting the variable to 0 when the buttons are clicked and resetting it back to the default value after the scroll animation is complete. Like this:

 

let defaultDelay = 1; // default delay

btnPhase1.forEach((btn) => {
  btn.addEventListener('click', () => {
    defaultDelay = 0; // set delay to 0
    gsap.to(window, {
      scrollTo: tl.scrollTrigger.labelToScroll('phase1Start'),
      onComplete: () => {
        defaultDelay = 1; // reset delay back to default after scroll
      }
    })
  })
})

tl.to('#phase-1', { opacity: 0, xPercent: -65, delay: delay })

But that didn't work either.

See the Pen QWogGaj by fullstackali (@fullstackali) on CodePen

Not sure what I'm wrong. Anyway, it was worth a shot. Hoping that GSAP will consider adding a feature that will make this possible in the future

[GreenSock]

On 1/20/2024 at 8:36 PM, greenchonies said:

I even tried creating a new variable that holds the delay value, then setting the variable to 0 when the buttons are clicked and resetting it back to the default value after the scroll animation is complete.

Yeah, that's just not how JavaScript itself works (totally unrelated to GSAP). For example: 

let a = 1;
let b = a;
a = 50;
console.log(b)/ // 1 (not 50)

What you're requesting is not at all a common request - I would actually see it as rather problematic because you'd be totally changing the mapping of scroll positions. Sorta like if you played a YouTube video forward and the color changed ever 1:00 (one minute), so you watched until 3:00 and then you scrubbed the playhead backwards and the color suddenly changed at 2:30 instead of 2:00. It'd create logic problems too because now the mappings are all different - if there were 3 color changes to get to 3:00 in the YouTube video, and you rewind to 2:30 and it hits the first color change (which should actually be at 2:00), what happens the rest of the time? Now you've got 2 more color changes that somehow fit into 2:30 worth of scrubbing. See the logic challenges? 

 

Of course if you really want to reconfigure your whole timeline such that there aren't any gaps, you can certainly do that at any time by altering the startTime() of each tween but I doubt you want to do that. 

 

More logic issues: Let's say you've got a timeline set up so that there's a 1-second animation, then 2-second gap, 1-second animation, 2-second gap, etc. what if you scrolled forward to halfway through the 2nd delay (5-second spot which is 83.3% through the timeline),  and then started dragging backwards? If you collapse the whole timeline to remove all gaps the moment you start going backwards, all the ratios change so now the entire timeline is 2 seconds instead of 6 seconds but it's still stretched over the same scroll positions, thus 83.3% into this new re-arranged timeline would put the playhead at a completely different spot (more than halfway through the 2nd animation). So visually, things would jump. 

 

The logic only really works the way you want it if the user scrolls all the way to the very end and you re-arrange everything in the timeline only when they go backwards. And then you must assume they'll scroll all the way to the very beginning without going in the other direction. 

 

So again, it's not like this is a flaw in ScrollTrigger/GSAP - it's purely a logic issue with what you're asking for (unless I'm misunderstanding). 

 

Does that clear things up? I don't think there's a way to magically work around all those logic issues.