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?

@Thanks @Shaun Gorneau I know it is not directly related to my previous question, but do you know how to fix one line with several dots like this for example: ------- - - instead of one simple line

@mikel Nice solution but I have two things that needs to be clear: how do I add image so when it is being hovered over, the image change to its default color instead of grey white. Moreover the block should be visible even when someone hovers out.

The red block is out of position when the screen is being resized, now I was wondering how to get them into right position immediately after resizing and the cursor is being hovered over it.

But how do I run two different classnames at the same time, which both have different opacities.

I have two classnames (.line-one and .line-two) and want them to give two different opacities, but only the latest classname will be showing in this case. How get I this two class names animating at the same time?

It should be animating alongside the outer line and when the screen width shrinks or grows it should continue its animation. When it hovers out the element it will be temporarily set on pause.

I want the lines go 45 degrees direction and was wondering how to do that. Could someone help me with this.

$(document).ready(function() { $(".client-logo").each(function(element) { TweenMax.defaultEase = Linear.easeNone; var tl = new TimelineMax({ onUpdate:updateUI, repeatDelay: 0, paused:true, repeat: -1 }); var tlWidth = $('.image-client-inner').innerWidth(); var tlHeight = $('.image-client-inner').innerHeight(); var tlMargin = 10; tl.to(element.previousElementSibling, 0.58, {left: tlWidth-tlMargin}). to(element.previousElementSibling, 0.58, {top: tlHeight-tlMargin}). to(element.previousElementSibling, 0.58, {left: 0-tlMargin}). to(element.previousElementSibling, 0.58, {top: 0-tlMargin}); element.animation = tl; }) $(".client-logo").hover(over, out); function over() { this.animation.resume(); console.log(this.animation); } function out() { this.animation.pause(); } function updateUI() { // alert('done'); } }); When the window is resizing, the animation should be repositioning themselves correctly. How should I do that properly?