Seek multiple child timelines

[Papi]

Hi, i have some nested timelines, and on click i want to speed up my timeline, but i need to speed up every child timeline (not parent timeline). For that i used seek, and everything works fine until i continue to add tweens/timelines after seeked timelines. In demo i seek every child timeline to 'toSeek' label and after my collectionTimelines i have .call, but there is delay between that .call function and end of my collectionTimelines only when i seek. If we leave animation to run without seek, call is called immediately after collectionTimelines.

 

Also if i leave out call (timeline ends immediately after collectionTimelines) then seek works fine and onComplete hook will trigger after collectionTimelines are finished.

See the Pen oNRKJRN by master-Papi (@master-Papi) on CodePen

[Rodrigo]

Hi @Papi and welcome  to the GSAP Forums!

 

This seems to be caused by the index value you're using here:

collection.forEach((item, itemIndex) => {
  const itemTimeline = gsap.timeline();

  itemTimeline.to(item, {
    duration: 2 + collectionIndex * 0.5,
    x: 200,
  });

  itemTimeline.addLabel('toSeek', `>-=${0.2 * itemIndex}`); // <- HERE

  itemTimeline.to(item, {
    opacity: 0.2,
    duration: 1,
  });

  collectionTimeline.add(itemTimeline, 0);
});

If you want to fade out each group you have to use the index value of the top level loop, like this:

collection.forEach((item, itemIndex) => {
  const itemTimeline = gsap.timeline();

  itemTimeline.to(item, {
    duration: 2 + collectionIndex * 0.5,
    x: 200,
  });

  itemTimeline.addLabel('toSeek', `>-=${0.2 * collectionIndex}`);

  itemTimeline.to(item, {
    opacity: 0.2,
    duration: 1,
  });

  collectionTimeline.add(itemTimeline, 0);
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Papi]

Hi @Rodrigo, thank you for reply and you are right about index, this was demo typo mistake but i don't think it solved the issue.

There is still delay after seek. If we look to console, and we hit seek at the beginning of the animation there is delay between collectionTimelines end and  "call after collection timelines" log. It looks like start time of .call function (or any tween instead of call) is not correct after seek.

Maybe i'm wrong but if .call start time is for example 5 seconds from start of the timeline and we seek some timelines before that call by 2 seconds, then call should be triggered also 2 seconds before (so 3 seconds from start of the timeline). In this example, if we seek "early" collectionTimelines will finish early but .call is triggered like itemTimelines were never seeked.