search

visionmedia / move.js

CSS3 backed JavaScript animation framework
http://visionmedia.github.com/move.js/
4.72k stars 686 forks source link

Slow movement not smooth #53

Open knod opened 9 years ago

knod commented 9 years ago

Using move.set( 'left'... and move.set( 'top'..., I'm attempting to move my animations slowly across the screen, sometimes 2% towards the left, 3% towards the top in 4 seconds. When I do this the movement isn't completely smooth - it makes progress in small jerks that are noticeable at this speed.

Environment: Mackbook Pro OSX Mavericks, Chrome 37.0.2062.122

yields commented 9 years ago

can you try doing .translate(x, y) / .to(x, y) instead ?

knod commented 9 years ago

Those and they do look a lot more smooth, which is great! Is there any way I can set either a percentage value or some pixel position instead? .to and .translate always add or subtract from the current position. Actually, I don't understand how they make their calculations.

For example: leftDiff = currentLeft - desiredNewLeft; topDiff = currentTop - desiredNewTop; move( domElement ).to( leftDiff [, topDiff] );

The $(elem).offset().left of my element changes, but not by the amount of leftDiff. Edit: Perhaps I'm not understanding my jQuery correctly, though .position().left doesn't seem to do better.

From my console log statements: Loop 1: currL: 244.25 newL: 160.39 leftDiff: 83.86... Loop 2: currL: 255.1512451171875 newL: 303.0712451171875 leftDiff: -47.92... Loop 3: currL: 220.34732055664062

Even if I'm calculating leftDiff incorrectly, if I understand correctly, the next "currL" should either reflect the value of "leftDiff" or not change at all, depending on how the movement is being done.

Could you clarify on how that movement is being calculated?