animate many elements in timeline constantly

[Klint]

How to animate all those dots to create constant sine wave? I mean that all 500 dots will animate constantly, without brake to wait for other dots to finish animation. Is it possible?

See the Pen PodVvNp by pezet4 (@pezet4) on CodePen

[Rodrigo]

Hi,

 

I'm not seeing any dots on your codepen example.

 

What you could try is the Motion Path Plugin with an endless Timeline.

 

This should provide a good starting point:

See the Pen LwzMKL by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Sure, it's possible but you'd need a fair amount of custom code for that. It's not a simple thing. Do you just want to have it look like a sine wave that's moving? Why not just use a path that you then animate horizontally instead? That'd give you much better performance compared to animating the position of 500 dots on every tick. 

 

If nobody else answers and you need assistance with the custom code, you can contact us for paid consulting services or post in the Jobs & Freelance forum. 

[Klint]

21 hours ago, Rodrigo said:

Hi,

 

I'm not seeing any dots on your codepen example.

 

What you could try is the Motion Path Plugin with an endless Timeline.

 

This should provide a good starting point:

Dots are made by JS in my example, and this svg is not what I want (example you gave don't work). I just want to animate group of elements in synchronization and without brakes to wait for next iteration of animation, until all elements finish first iteration. Which is that in my example whole length of this red line will animate constantly.

[PointC]

Not sure if it'll help, but here are a couple of my old seamless demos using SVG.

 

See the Pen wvpObWa by PointC (@PointC) on CodePen

 

See the Pen 52ac38788ccdd84fc1eeaa3fcc9afa9e by PointC (@PointC) on CodePen

 

Happy tweening.

[Klint]

I have found solution  solution was timeline.progress()