Jump to content
GreenSock

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

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

Recommended Posts

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.

Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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?

Link to post
Share on other sites

 

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

  • Like 4
Link to post
Share on other sites

Thanks, this works perfectly!

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.

×