Jump to content

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

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?



Link to comment
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 ...



  • Like 2
Link to comment
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 comment
Share on other sites




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


  • Like 4
Link to comment
Share on other sites

Thanks, this works perfectly!

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.