Jump to content
Search Community

Staggering not working

Marina Gallardo test
Moderator Tag

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 4
  • Thanks 1
Link to comment
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 4
  • Thanks 1
Link to comment
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 comment
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 comment
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 comment
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 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...