Jump to content
GreenSock

Dante

How to make the loop look continous?

Recommended Posts

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



 

  • Like 3
Link to comment
Share on other sites

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

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

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!

  • Like 2
Link to comment
Share on other sites

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

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. 

  • Thanks 1
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.
×