How can I create a smooth animation that eases in toward a target as it changes position?

As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates.

What would be the ideal implementation / structure to achieve the desired effect?

How can I create a smooth animation that eases in toward a target as it changes position?

As this jsFiddle shows, the animation stops or gets blocked during moveTarget() instead of continuing toward the new target coordinates.

What would be the ideal implementation / structure to achieve the desired effect?

• javascript
• animation
• requestanimationframe

1 Answer 1

Ok, answering my own question here in case anyone else has this problem.

Instead of calculating change (change = finish - begin) each time moveTarget() fires, it is constantly being calculated in onEnterFrame(). So moveTarget() only responsible for getting the new X and Y positions.

This allows the values to ease toward the target.

I also permanently set the time value of the easing function to always be 1:

easeIn(1, begin, change, duration);

The example answer is in this revision jsFiddle: http://jsfiddle/dannygarcia/LqP2R/45/