Dante Posted November 12, 2021 Share Posted November 12, 2021 Currently the loop stops in between. I'd like to make it look continous. See the Pen porOdRg by heyDante (@heyDante) on CodePen Link to comment Share on other sites More sharing options...
nico fonseca Posted November 12, 2021 Share Posted November 12, 2021 Hey @Dante, welcome to the forum ! 💚 You need to set an ease:none to all your tweens because the default ease is power1.out, the easy way to do that is to set a default ease for your timeline: const tl = gsap.timeline({ repeat: -1, defaults: { ease:'none', } }); See the Pen 65dcf71271bde8d62681bf52e1b7084b by nicofonseca (@nicofonseca) on CodePen 3 Link to comment Share on other sites More sharing options...
Dante Posted November 13, 2021 Author Share Posted November 13, 2021 Thanks, it works. How about another circle also doing the same animation but it starts a little bit late or early, just don't want them to animate together. Also, if there's improvement I can make to the code, please let me know! Link to comment Share on other sites More sharing options...
GreenSock Posted November 13, 2021 Share Posted November 13, 2021 I'm not sure why you've got all those extra transformOrigin animations in there - I think you could simplify things quite a bit: See the Pen 0eba7a928322acd10a23f760d8759a63?editors=0010 by GreenSock (@GreenSock) on CodePen Does that help? Link to comment Share on other sites More sharing options...
Dante Posted November 13, 2021 Author Share Posted November 13, 2021 Thanks. It does help. I see that you're targeting two different class. Is this the only was to start them at different time. The reason I had multiple transformOrigin was because to give a circular path. The thing I'm aiming for is actually to have div circles move constantly in independent motion. I got with circles, but how about a more randomized path for each. Currently I just moved transform origin at four points, hence the need for four transformOrigins. I was thinking of expanding further than four paths and maybe generate paths and the circles will move to that path. I looked around and found the bezeir thing within gsap. That seems close. Link to comment Share on other sites More sharing options...
GreenSock Posted November 13, 2021 Share Posted November 13, 2021 52 minutes ago, Dante said: Thanks. It does help. I see that you're targeting two different class. Is this the only was to start them at different time. Nope, not at all. You can use the same class and do a loop: See the Pen 83d1f8b33e6270f5f35cfa7fcbb4c461?editors=0010 by GreenSock (@GreenSock) on CodePen 52 minutes ago, Dante said: Currently I just moved transform origin at four points I still don't understand why you think that's necessary or helps in any way. 🤷♂️ 53 minutes ago, Dante said: I looked around and found the bezeir thing within gsap. That seems close. Sure, you can do that but in my opinion it's overkill if you simply need to move something in a circular path because you can use rotation with an offset transformOrigin. Simple. Fast. As you can see, in my demo I showed how you could randomize everything too within certain ranges. Enjoy! 2 Link to comment Share on other sites More sharing options...
Dante Posted November 15, 2021 Author Share Posted November 15, 2021 Thanks for the explanation. Is "+=360" equals "current rotation value + 360"? Also, can I add another animation on top of the circular motion animation, without disturbing its motion. Like a shake animation which could trigger when I click a button? Like when I click a button, the bubble shakes a little, but the circular motion continues as if it has no idea about the shake. Link to comment Share on other sites More sharing options...
GreenSock Posted November 15, 2021 Share Posted November 15, 2021 25 minutes ago, Dante said: Is "+=360" equals "current rotation value + 360"? Yep, exactly. 25 minutes ago, Dante said: can I add another animation on top of the circular motion animation, without disturbing its motion. You can animate other properties (like x and y) at the same time, sure. 1 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