Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Marina Gallardo

Staggering not working

Recommended Posts

Hi @Marina its an issue because stagger needs an array. When your looping through each element and adding the timeline to them individually its still animating but has no siblings to stagger with. 

 

gsap.registerPlugin(MotionPathPlugin);

let cabezas = document.querySelectorAll('.cabeza');

const r = 6;

let tl = gsap.timeline();

tl.to(cabezas, {
  motionPath: {
    path: `M ${-r}, 0
a ${r},${r} 0 1,0 ${r * 2},0
a ${r},${r} 0 1,0 -${r * 2},0z`,
  },
  duration: 5,
  repeat: -1,
  ease: 'none',
  stagger: 0.5,
});

Strip it out of the loop and it behaves ... well it staggers :) 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Great... so as I see I don't have to use a forEach or something like that to apply to all elements, that's great. 

 

Now it staggers, but it stops and makes a break. Also, gets "stuck" at the init. I want it fluid and smooth. How I fix that?

 

See the Pen YzwaVrY by marinagallardo (@marinagallardo) on CodePen

Link to post
Share on other sites

You can put stuff like yoyo, repeat, and callbacks inside a stagger object. 

 

I don't think the docs are real clear on this. I think the should be listed with the other properties like amount, each, from, etc.

https://greensock.com/docs/v3/Staggers

 

gsap.to(".box", {
  x: 100,
  stagger: {
    repeat: -1,
    yoyo: true,
    each: 0.1
  }
});

 

See the Pen b0f4b8cef508c5b0a89cece3836de7bc by osublake (@osublake) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

You need the speed to be uniform, so change the ease to none. The default is "power1.out".

 

gsap.to(cabezas, {
    motionPath: {
      path: `M ${-r}, 0
a ${r},${r} 0 1,0 ${r * 2},0
a ${r},${r} 0 1,0 -${r * 2},0z`,
    },
stagger: {
    repeat: -1,
    each: 0.2
  },
  ease: "none"
});

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

The default duration is 0.5s. Change it to something higher. And set your objects to the start position so they don't jump.

 

gsap.set(cabezas, {
  x: -r,
});

gsap.to(cabezas, {
  motionPath: {
    path: `M ${-r}, 0
a ${r},${r} 0 1,0 ${r * 2},0
a ${r},${r} 0 1,0 -${r * 2},0z`
  },
  ease: "none",
  duration: 1,
  stagger: {
    repeat: -1,
    each: 0.2
  }
});

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites
Quote

And set your objects to the start position so they don't jump.

 

That was the key, I didn't understand why they were jumping. THANKS ❤️

 

Can you give me an explication of why the object must have a start position set for avoid jumping?

 

Thank you

Link to post
Share on other sites
8 minutes ago, Marina Gallardo said:

Can you give me an explication of why the object must have a start position set for avoid jumping?

 

You only need to do that because there is a delay when the 2nd and 3rd animations start. They are essentially paused, so it's not going to jump to the first animation frame before it starts.

 

 

  • Like 4
Link to post
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.

×