[FEATURE] Controlling the speed of a timeline synced to a timeline synced to a ScrollObserver

[f1yingbanana]

Describe what the feature does

Imagine you are building a complex Timeline animation based on scroll. Each section on your page has a Timeline with autostart: onScroll({ ... }). There are several sub-Timelines within the section that this section Timeline is responsible for controlling, and as they are also scroll based, they are synced to the main Timeline.

Now suppose you need to smoothly stop the animations on a sub-Timeline. You expose your sub-Timeline as a ref to the section Timeline, and write something like below:

Provide a code example of what the feature should look like

subTimeline.current.timeline.sync(sectionTimeline);

sectionTimeline.add(
  subTimeline.current.timeline,
  {
    speed: [1, 0],
    duration: 1000,
    ease: "out(3)",
  },
  1000,
);

Would be nice if sync would respect the speed parameter, but it doesn't. Speed gets ignored, and this does nothing.

Describe alternatives you've considered

• Use a separate ScrollObserver for each sub-Timeline, but that feels clunky
• Write a custom callback with onUpdate on the ScrollObserver, but we lose composability, AND precision becomes a huge problem because we are adding up lots of deltas. Playing the timeline back and forth a few times and it adds up and the animation is out of sync badly.

    createTimeline({
      autoplay: onScroll({
        onUpdate: (scrollObserver) => {
          if (!subTimeline.current) {
            return;
          }

          subTimeline.current.seek(
            subTimeline.current.currentTime +
              scrollObserver.distance *
                (scrollObserver.progress - scrollObserver.prevProgress) *
                subTimeline.current.speed,
          );
        },
      }),
    });

Additional context

Maybe this could be done in other ways that I'm just not aware of, new to the library! Cool stuff!