Jump to content


Tweenmax svg circles change position randomly

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello guys,

I am trying random circle movement with tweenmax but the circles moves very little , if I increase the value for movement it goes outside of container.Is it possible rearrange them within the container? The container is marked by red background.

Is it possible to create a animation like this? http://revolve.pro/#technologies


See the Pen rpjOKP by swaranan (@swaranan) on CodePen

Link to comment
Share on other sites

3 hours ago, lennco said:

Hi swaranan


Something like this?




Yes, Something like this. Now I think I can move on. Thank you.
Have one small question, How can i pause the animation and set all circles to their initial cx, cy? Like on hover set them to their initial position.

Link to comment
Share on other sites

I'm sure it can be done alot better, but just added a function for clicking the circle to make it jump back to its original position. Click it again to animate it.


See the Pen eygvbp?editors=1010 by lennco (@lennco) on CodePen


  • Like 4
Link to comment
Share on other sites

  • 4 months later...


I found this thread after a google search and it has been so useful to me. Thanks for the great code. I just have a quick question. What would be the best way to stop the animation within a function?



Link to comment
Share on other sites

If you want to literally kill the tweens, one easy way would be to use the killTweensOf() method. 



You can just pass in the target(s) that you want to stop animating. 


Or you could keep an array of your tweens yourself and pause()/kill() each one. Or TweenMax has a pauseAll() method. https://greensock.com/docs/TweenMax/static.pauseAll()


Lots of options. There are still more, but I don't want to overwhelm you :)

  • Like 2
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.