Tweenmax svg circles change position randomly

[swaranan 0 Likes (Newbie)]

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

[lennco 35 Likes (Newbie)]

Hi swaranan

 

Something like this?

 

 

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

 

[swaranan 0 Likes (Newbie)]

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.

[lennco 35 Likes (Newbie)]

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

 

[swaranan 0 Likes (Newbie)]

@lennco Thank you mate. You are a lifesaver..

[lennco 35 Likes (Newbie)]

You're very welcome

[Gumbo 2 Likes (Newbie)]

Hi. 

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?

 

Thanks

[GreenSock 8,117 Likes (Superhero)]

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

https://greensock.com/docs/TweenLite/static.killTweensOf()

 

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