Jump to content
Search Community

Stagger Timelines

cdedreuille test
Moderator Tag

Recommended Posts

Hi,

 

I'm having a hard time trying to figure how to launch multiple timelines in a sequence with interval (or staggered).

I have 30 times the same component. Each component is a timeline and what I'm looking for is a way to launch animate all of them the same way you do stagger on a tween.

 

Not sure if this make sense.

Link to comment
Share on other sites

This is what I'm using right now.

Each element has a class .why-pattern 

 

const whyElem = gsap.utils.selector(whyRef);
const tl = gsap.timeline();
tl.to(whyElem('.why-pattern1'), { x: 64, duration: 1, ease: 'power2.inOut' });
tl.to(whyElem('.why-pattern2'), { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0');
tl.to(whyElem('.why-pattern2'), {
  scale: 3,
  rotate: 90,
  borderRadius: 16,
  duration: 1,

  ease: 'power2.inOut',
});
tl.to(
  whyElem('.why-pattern3'),
  { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' },
  '<0'
);

But this of course is not staggered. It's just a single timeline animating all elements with the same class.

 

Do you have any example on how to create multiple timelines from an array?

Link to comment
Share on other sites

Do you mean like this?

 

const whyElem = gsap.utils.selector(whyRef);
const timelines = [];
const tl1 = gsap.timeline();
timelines.push(tl1);
tl1.to(whyElem('.why-pattern1'), { x: 64, duration: 1, ease: 'power2.inOut' });

const tl2 = gsap.timeline();
timelines.push(tl2);
tl2.to(whyElem('.why-pattern2'), { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0');
tl2.to(whyElem('.why-pattern2'), {
  scale: 3,
  rotate: 90,
  borderRadius: 16,
  duration: 1,

  ease: 'power2.inOut',
});

const tl3 = gsap.timeline();
timelines.push(tl3);
tl3.to(
  whyElem('.why-pattern3'),
  { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' },
  '<0'
);

...

let main = gsap.timeline();

timelines.forEach((tl, i) => {
  main.add(tl, i * 0.1);
});

 

Link to comment
Share on other sites

I think I found a solution.

 

let main = gsap.timeline();
whyElem('.why-pattern').forEach((_, i) => {
  console.log(whyElem(`.why-pattern1`)[i]);
  const anim = gsap.timeline();
  anim.to(whyElem(`.why-pattern1`)[i], { x: 64, duration: 1, ease: 'power2.inOut' });
  anim.to(
    whyElem('.why-pattern2')[i],
    { rotate: 180, duration: 1, ease: 'power2.inOut' },
    '<0'
  );
  anim.to(whyElem('.why-pattern2')[i], {
    scale: 3,
    rotate: 90,
    borderRadius: 16,
    duration: 1,

    ease: 'power2.inOut',
  });
  anim.to(
    whyElem('.why-pattern3')[i],
    { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' },
    '<0'
  );

  main.add(anim, i * 0.1);
});

Thanks a lot for your help @OSUblake

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...