How to sync two complex timeline animations inside one scrollTrigger

[Julia Shikanova]

Hello! 

const globalTimeline = gsap.timeline({
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    // end: "bottom top",
    end: "400%",
    pin: true,
    scrub: true,
    invalidateOnRefresh: true,
    markers: true
  }
});

globalTimeline.add(animateScrolling()).add(animateBox(), "<");

I have globalTimeline with scrollTrigger and I'm trying to figure out is there are any way to sync animateScrolling() (one step animation) with animateBox() (3 steps animation). Currently animateScrolling() is finishes way before animateBox(). It's because two animations have different duration. 

The main problem, my actual timelines is more complex than this CodePen, so specifying duration for each timeline is not really an option. Is there any other way to make two animations execute at the same time?

Thanks in advance!

See the Pen VwMermZ by jshikanova (@jshikanova) on CodePen

[Carl]

First, thanks for the great demo. It's rare that we see a complex scenario so cleanly stripped down to the bare necessities.

 

I know you said you couldn't specify the duration of each timeline due to the complexity, but i just want to make sure you know that you can dynamically assign the duration when the scrolling timeline is inserted into globalTimeline.

 

globalTimeline.add(animateScrolling()).add(animateBox().duration(globalTimeline.duration()), "<");

 

See if this works for you:

See the Pen mdBVxxE?editors=0010 by snorkltv (@snorkltv) on CodePen

 

My second suggestion was to use the progress of the ScrollTrigger to adjust the progress() of the scrolling timeline onUpdate but I got funky results. Perhaps we can pursue that more if this first solution doesn't work for you and your setup

[Julia Shikanova]

@Carl, thank you, it works great!