Synchronising timelines

[eightarmshq]

I am trying to make a number of items in an SVG move horizontally across the screen.

 

As they enter the screen, I want them to fade in. The way they are spaced out is important to the designer. It looks something like this:

 

So I make a timeline that has each block fade in:

 

const makeTimeline = (el) => {
  const text1 = el.querySelector(".text-box-1");
  const text2 = el.querySelector(".text-box-2");
  const text3 = el.querySelector(".text-box-3");
  const text4 = el.querySelector(".text-box-4");
  const text5 = el.querySelector(".text-box-5");

  const tl = gsap.timeline({ paused: true });
  tl.set(el, { x: `100%` });
  tl.set([text1, text2, text3, text4, text5], { opacity: 0 });
  tl.to(el, { x: `-100%`, duration: MASTER_DURATION, ease: `linear` });
  tl.to(text1, { opacity: 1, duration: FADE_DURATION }, 3);
  // ...
  tl.to(text5, { opacity: 1, duration: FADE_DURATION }, 5.4);
  return tl;
};

But no matter what I do, I cannot get the timing right so they seamlessly loop (trying below to do 0 seconds, a 1/3rd and 2/3rds):

this.part1 = document.querySelector("#home-anim-1");
this.part2 = document.querySelector("#home-anim-2");
this.part2 = document.querySelector("#home-anim-3");

this.tl = gsap.timeline({ repeat: -1, duration: MASTER_DURATION });

this.tl.add(makeTimeline(this.part1).play());
this.tl.add(makeTimeline(this.part2).play(), MASTER_DURATION * 0.3333);
this.tl.add(makeTimeline(this.part2).play(), MASTER_DURATION * 0.6666);

Here is a codepen:

See the Pen 41d6af9882ac220b57f96b99dcb615f3?editors=0010 by EightArmsHQ (@EightArmsHQ) on CodePen

 

If I use 2 items, it pretty much works:

See the Pen 4e5993c6cfd8ed75f482f3e78502b9de?editors=1010 by EightArmsHQ (@EightArmsHQ) on CodePen

 

Is anyone able to help me line up the animations? 

 

I have a slightly more stripped back version here but its even more broken:

See the Pen 8b217cad4c1cbd412cd6271547e015db?editors=0010 by EightArmsHQ (@EightArmsHQ) on CodePen

 

Eventually, I'd like to set the delay of the second and third instance to be negative and get a seamless loop / no delay at the start but I'm already struggling so much!

 

Thanks

See the Pen 41d6af9882ac220b57f96b99dcb615f3 by EightArmsHQ (@EightArmsHQ) on CodePen

[GSAP Helper]

Friendly reminder, you've blocked the forking of your pens. This makes it really hard for someone to edit your work. Maybe you could change this in your Codepen account. 

[Rodrigo]

Hi,

 

Creating a seamless loop with the extra feature of fading in the elements as they appear at the right side of the SVG view box is not a super simple task and I'm afraid that is a little beyond the help we can provide in these free forums.

 

If I was you I'd start by looking into the Modifiers Plugin and take it from there:

https://gsap.com/docs/v3/GSAP/CorePlugins/Modifiers

 

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

 

Hopefully this helps.

Happy Tweening!

[eightarmshq]

Thanks for the reply and helpful article.