individual duration for .to('.class')?

[Peach2tm]

I have the follow code, that makes my "apple" class move up and down just a bit. It works as you would expect

gsap.to('.apple', {duration:2, y:'20%',  repeat:-1, yoyo:true, ease: "power1.inOut"});    

 

But it's too in sync for my taste, and what i really want to do is offset each element just a bit. Is there a way to randomize each elements duration and y-offset - or would i have to animate each object individually?

 

Thanks.

[Cassie]

Hey pal - Staggers are a good way to  'offset' the elements.

You can also use random values. 

Does this help?

See the Pen f5b72843034a3bc63f179eba9589b15f by cassie-codes (@cassie-codes) on CodePen

[mikel]

Hey @Peach2tm,

 

Welcome to the GreenSock Forum.

 

If you want an endless repeat, you could use function-based values or random values in a loop.

 

See the Pen jOmPWOJ by mikeK (@mikeK) on CodePen

 

... and please provide your case in a CodePen - its easier for us.

 

Happy tweening ...

Mikel

 

[Peach2tm]

That was easy:

gsap.to('.apple', {duration:'random(0.5,2)', y:'20%',  repeat:-1, yoyo:true, ease: "power1.inOut"});

 

Or to update yours:

See the Pen NWjqxpJ by anders-wibroe (@anders-wibroe) on CodePen

 

Problem now is that the use of yoyo:true makes the animation wait to reserve until the end of the duration of the slowest element. How would i make each element yoyo separately?

[mikel]

 

Hey,

 

you could use advanced stagger.

 

gsap.to(".box", {
  y: 100,
  stagger: { // wrap advanced options in an object
    each: 0.1,
    from: "center",
    grid: "auto",
    ease: "power2.inOut",
    repeat: -1 // Repeats immediately, not waiting for the other staggered animations to finish
  }
});

 

Happy staggering ...

Mikel

[Peach2tm]

Thanks, this works perfectly!