Shaky scale animation

Question

I am doing little mosaic (if i can call it like that). I am changing scale and opacity based on position mouse and the center of the picture/div.

I am calculating the distance via vektors with

 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 looping throught the divs/pictures and if the distance is smaller than 100 , it calculates its opacity/scale.

But i came to a problem , where animation of changing opacity/scale is little bit shakky. It seems like its hesitating if it should do something.

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

Is there any way or shortcut how to fix that 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 transition your elements with CSS and change the value 60 times a second with JS, it will flicker.

Also, you probably shouldn't add an event listener to every single element. This will cause unnecessary operations. Instead, you can add one on their parent (I added it to the nav).

There was some room for optimizing also, which further smoothens out the transition. Here's the result:

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