Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cdedreuille

Stagger Timelines

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

Do you have a demo?

 

Basically, you just add your timelines to a parent timeline and optionally use the position parameter to space them out however you want.

 

gsap.timeline()
  .add(timeline1)
  .add(timeline2, "+=0.5")
  .add(timeline3, "+=0.5")
  ...

 

  • Like 1
Link to comment
Share on other sites

Just to make it clearer. What I'm looking for is:

  • Using scrollTrigger, when I enter the view port
  • Launch 30 timeline animations
  • Each timeline is staggered by 0.1
Link to comment
Share on other sites

Oh I didn't know you could create a timeline of timelines. I'll try that.

  • Like 1
Link to comment
Share on other sites

If you can add all your timelines to an array, it should be really easy to loop through and add them.

let main = gsap.timeline();

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

 

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.
×