Peach2tm Posted July 1, 2021 Share Posted July 1, 2021 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 comment Share on other sites More sharing options...
Cassie Posted July 1, 2021 Share Posted July 1, 2021 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 4 Link to comment Share on other sites More sharing options...
mikel Posted July 1, 2021 Share Posted July 1, 2021 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 2 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 1, 2021 Author Share Posted July 1, 2021 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 More sharing options...
mikel Posted July 1, 2021 Share Posted July 1, 2021 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 4 Link to comment Share on other sites More sharing options...
Peach2tm Posted July 1, 2021 Author Share Posted July 1, 2021 Thanks, this works perfectly! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now