Shaky scale animation

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 =

Is there any way or shortcut how to fix that as i called it shakking or hesitating?

-------------Problems Reply------------

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:

Category:javascript Views:0 Time:2018-10-07
Tags: javascript css

Related post

  • Scale Animation on an EditText .. help 2011-02-16

    i'm trying to animate an EditText when i touch it using scale animation , i managed to do that by creating my own editText (extends EditText) .The animation works , but after it the EditText size(width) does not change it still the same . How can i c

  • iPhone SDK: Flip-and-scale animation between view controllers using blocks? 2011-03-14

    I'm trying to create a flip-and-scale animation between two view controllers. This seems possible using animation blocks available in iOS 4.0, but I'm still unsure how to implement it. I found this SO question which shows a flip animation. Using this

  • Zooming gallery Images when touched in Android or how to implement scale animation for images in gallery? 2011-05-24

    I would like to Zoom gallery Images when touched in Android and would like to give some animation effects, how can I do so ? In other way my question is how to implement scale animation while images sliding in Gallery View? --------------Solutions---

  • Button not showing after coming back from Scale Animation 2011-07-08

    I have a button which when you click it, a scale animation occurs on the button (scaling until 0), and then another screen shows up. when i hit back the button that i scaled does not show. Help? --------------Solutions------------- From what I unders

  • Android scale animation to specified size 2011-08-04

    Hi, I'm trying to animate my view to a specified size. I have a linear layout that is divided into a grid of 3 rows and 3 columns. So I have 9 linear layouts as squares. I am trying to scale the square to a specified size i.e. the size of the outer p

  • Custom scale animation 2011-08-11

    I have an 800x480 image, and I want to have a scale animation so that the image scales to 960x576. I know that Android has a ScaleAnimation class for this, but I also want the user to be able to pause the animation while it's scaling and resume from

  • Android scale animation on view 2011-09-14

    I want to use ScaleAnimation (programmatically not in xml) to change height to view from 0 to 60% of parent height. Width of view is constant and is 50px. View is empty only background color is set. Can someone give me code for scaleAnim using ScaleA

  • Android image scale animation relative to center point 2011-12-07

    I have an ImageView and I do a simple scale animation to it. Very standard code. My scale_up.xml: <set xmlns:android=""> <scale android:fromXScale="1" android:fromYScale="1" android:toXScale="1.2" an

  • scale animation android 2012-04-24

    hello i saw this code that make a scale animation for a list view public class ViewAnimation extends Animation { float centerX, centerY; public ViewAnimation3(){} @Override public void initialize(int width, int height, int parentWidth, int parentHeig

  • Have scale animation AFTER translate animation from last position 2015-03-08

    I want to apply a translate animation to the view from bottom right to center THEN scale animation from where it finished translation. Once this is done, I want the view to come back to its original size and position. Any idea how to do that? Here is

  • Scale animation on Google Maps markers 2016-08-18

    Is it possible to make an scale animation on a marker, and start animation when marker is added? I have an example app called "streamdin" that makes such animation. I'm stuck with this, anyone has a clue? Edit: This is my code and sure the most

  • How do I chain scale animations with an iPhone UIImageView? 2009-03-06

    I'm trying to scale an image down, change the image, then scale it back up. CABasicAnimation* shrink = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; shrink.toValue = [NSNumber numberWithDouble:0]; shrink.duration = 1; shrink.delegate =

  • Scala, animations and graphical user interface 2009-08-03

    I want to be able to do graphics with Scala programming language. Need to be able to do animations and attractive user interface, where to start? --------------Solutions------------- Remember that scala can use java classes? :) I would start by learn

  • Home page with jquery scale animation not loading up at the first time 2011-04-04

    I have this problem: On my home page of a developing Wordpress site: I have an animation with this jQuery + jQueryUI(scale) script: jQuery(function($) { // home image set dimensions related to screen size var Swidth =

  • Xml scale animation of ImageView makes the image aliased 2011-04-12

    I have a little xml animation that animates few ImageViews inside my layout. Actually it is the wavescale animation from the api demos sdk example. This animation scales the image up and then down to its original size so it looks sort of wave. The pr

  • Translate and scale animation 2011-10-02

    I have a wpf application and image inside a canvas. The image is placed in 0,0. I need to animate the image moving from 0,0 to 500,200 and in the same time growing (I like to make an effect like coming from far to near). If I do this: TranslateTransf

  • CALayer scale animation for layer size starting from bottom left to top right 2012-03-23

    Another problem with animation on a layer to make it scale and show like growing from bottom left, somewhat similar to the figure : --------------- | | |---------- | | | | | | | |----- | | | | | | --------------- I have tried some animations but not

  • scale animation for wpf popup 2010-04-09

    I have a nice little popup, when it shows, I d'like it to growth from 0 to 1x scaley, but I don't get it right, when I click multiple times, it looks like i "catch" the animation at various states during the "growth". <Window.Triggers> <Even

  • How to implement UIView flip and scale animation like iTunes app 2011-03-15

    I need to implement the above animation in OPENGL. But I am confused about the steps required to achieve it(being opengl noob and all that). I have code which will flip views of same size, but i dont know how to achieve the scaling effect.

  • Applying translate and scale animations sequentially 2011-12-20

    I'm trying to create some kind of gallery view for my game's level select menu. There are three items placed horizontally and two buttons: left and right. When I press the right button those three items should all move to left, and when there's a lef

  • Can I animate(scale) just one component of an android layout and have the layout update during animation 2009-11-10

    Imagine I have a toolbar implemented as a horizontal LinearLayout as follows: [___Button1____] [___Button2___] [___Button3___] [___Button4___] When someone clicks on Button2, I want the toolbar to change to: [___Button1____] [___________Button2______

  • iPhone UIView Animation Best Practice 2009-03-10

    What is considered best practice for animating view transitions on the iPhone? For example, the ViewTransitions sample project from apple uses code like: CATransition *applicationLoadViewIn = [CATransition animation]; [applicationLoadViewIn setDurati

  • What is the best way to make a bouncing ball animation with infinite loop on iPhone? 2009-06-27

    I am developing an iPhone game in which birds bounce like in this game: I have set up the images for animating the wings of the flying bird like this: [imgBird[i] setAnimationImages:birdArray

  • Smooth animation using MatrixTransform? 2010-01-01

    I'm trying to do an Matrix animation where I both scale and transpose a canvas at the same time. The only approach I found was using a MatrixTransform and MatrixAnimationUsingKeyFrames. Since there doesnt seem to be any interpolation for matrices bui

  • Grouping two Core Animations with CAAnimationGroup causes one CABasicAnimation to not run 2010-01-22

    I have two animations that I'm trying to perform on a UILabel on the iPhone with OS 3.1.2. The first rocks the UILabel back and forth: CAKeyframeAnimation *rock; rock = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"]; [rock setBegi

Copyright (C), All Rights Reserved.

processed in 0.109 (s). 11 q(s)