Shawl Scale Animation

Question

I am doing a little mosaic (if I can call it that). I change the scale and opacity based on the position of the mouse and the center of the image / div.

I calculate distance through vectors using

function calculateDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + (elem.offsetHeight / 2)), 2))); } 

and im loop through div / images, and if the distance is less than 100, it calculates its opacity / scale.

But I ran into a problem when the animation changing transparency / scaling is a little shaky. It seems that he doubts that he should do something.

Demo = http://jsfiddle.net/Trolstover/x9fpv8pb/5/

Is there a way or shortcut on how to fix this, as I called it shakking or hesitating?

Answer 1

The biggest problem you have is the -webkit-transition rule in your CSS. If you try to translate your elements using CSS and change the value 60 times per second using JS, it will flicker.

In addition, you probably should not add an event listener to each element. This will cause unnecessary operations. Instead, you can add one of your parents (I added it to nav ).

There was also some room for optimization, which further smoothed the transition. Here is the result:

http://jsfiddle.net/ilpo/x9fpv8pb/16/