chiho

How can I get each line of balls moving a bit slower than the left line, meaning that line 1 goes faster than line 2, and line 2 goes bit faster than line 3 and so on. Moreover, how can I get the reflection of the five line next to the current one. So line 1 till 5 are now working in attached codepen url, but i also want line 6 till 10 , but then moving the opposite direction of the current first five lines, instead of waving to the left, line 5-10 should be now waving to the right. Please keep the code DRY.

As you might see in the orange section there are animated lines with dots (this.draw = function()), whilst my expected result in the green part should be normal rectangles (this.draw2 = function()) instead of lines with dots. The animation in the green part should have two different opacities, so it seems like there are two different layers of animated background. To make long story short: Green part should only call this.draw2 = function(), which are rectangles and besides that there are two different opacities. How should I fix that. Really important is to not use CSS for this because of performance issues. Only Canvas allows.

@mikel ---> Found the answer

I was more looking for canvas, no html or css only javascript

@Carl the circles should animate one way instead of infinite circles

I am trying to get blocks animate diagonally (animating one-way) like what you see in this pen, but now I want that in canvas as you might see. How can I get this animation in canvas ---> .

I was wondering if it is possible to run this animation in svg instead of using divs and if that is true, where to start?

@PointC I have this now and want an ocean of animated balls if you know what I mean, so i need extra rows.

I want the balls animating with scaling, so I get a waving effect. Anyone here who could assist me with this.

I am trying to output a row with balls which you see on threejs (particle waves), but then without the wave animations (which is the second thing I need to do, but for now I need balls which outputs themselves in rows like this example https://threejs.org/examples/#canvas_particles_waves.

I have built an animated tiles which now starts all from the same point, but what I want to achieve is that every tiles should have a different starting point. Most important thing here is that it should be maintainable, meaning that no matter how much tiles I add in the near future, it should randomly calculate a different starting point for each tile.

@mikel I have like 9 tiles now and want them start all at different positions randomly, what is the best approach for this.

.line-two { height: 66px; width: 3px; background-color: $basic-orange-first; position: absolute; opacity: 0.2; z-index: -5; &:before { content: "...."; letter-spacing: 4px; font-size: 18px; color: $basic-orange-first; margin-left: -9.6px; margin-top: -32px; position: absolute; transform: rotate(90deg); } &:after { content: "...."; letter-spacing: 4px; font-size: 18px; color: $basic-orange-first; margin-left: -10.6px; margin-top: 64px; position: absolute; transform: rotate(90deg); } }

I was wondering if it is possible to build this three.js completely in Greensock? And more importantly how should I write that in Greensock?