[Synchronising timelines]

Thanks for the reply and helpful article.

[Synchronising timelines]

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

[Make flip animation work in the same div in both directions]

I have an image that flips from one div to the other. When the animation happens one way, it:

1. Is appended to the target div
2. transforms really nicely over to it

The other way, it:

1. Is appended to the previous div (which has overflow hidden on it)
2. transforms over to it, except it is hidden by the overflow.

Is there a way I can make it work that both animations happen in the overflow: visible div?

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

[Use pinning to layer panels on top of each other as you scroll with reactjs.]

You haven't been totally clear on what you have tried so far. I notice that there is a goToSection(i)function though.

 

I added a <div class="buttons"></div> at the top of the page. Then I included this js which creates a button for each panel (the panels are already defined in the demo). When you click a button, it triggers goToSection with the panel index:

 

const buttons = document.querySelector(".buttons")

panels.forEach((panel, i) => {
  const button = document.createElement('button');
  button.innerText = `Panel ${i+1}`;
  buttons.appendChild(button);
  button.addEventListener("click", () => goToSection(i))
})

See the Pen b5b64bcc1d7494f8af91d3cbe9c6d5d6?editors=0110 by EightArmsHQ (@EightArmsHQ) on CodePen

[Stagger with repeatRefresh not working as intended]

I'm trying to make the stagger argument repeat indefinitely (on an individual item level) but also re-evaluate the positions for each element to move to with each stagger. I seem to be able to get one or the other.

 

You can see the randomness I want here: 

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

 

And the timing I want to use here: 

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

[Flip a transformed element]

Sorry I didn't realise that private pens can't be forked.

 

Thanks so much! this is perfect. I think I was confused as you write things like:

gsap.to(img, {scale: 0.5})

So I assumed you pass the gsap values, not transform. Just using transform works great!

 

Have a nice day.

[Flip a transformed element]

Hi there, 

 

I'm trying to Flip a skewed, scaled img tag from one position to another. The position is working well, but the transforms aren't smoothly being set. Instead, the scale snaps to the correct one at the end of the animation.

 

I think I'm missing something. In the codepen I show a few of the things I have tried. It seems like I want to add some other gsap properties to the Flip animation, but I'm not sure how to go about it. Any help very welcome!

 

Thanks

Dave

 

(Scroll down for the View button in the codepen that triggers the animation) 

See the Pen 21130befb94dd751663e143349558986?editors=0010 by EightArmsHQ (@EightArmsHQ) on CodePen