Smooth Movement In JavaScript

Interactive JavaScript applications frequently dynamically hide and reveal display components, often making use of a ‘slide’ effect. A naïve implementation of the slide effect will not accelerate or decelarate, which results in movement starting and stopping abruptly. SmoothMovement handles acceleration and deceleration, and allows the target of the movement to be changed at any time.

An example is shown below — click on the name of a planet or dwarf planet to smoothly scroll the image to it.

Download SmoothMovement

SmoothMovement is released under the terms of the CC0 1.0 Universal legal code — in effect, you may use it however you want, with or without attribution. Download one of the files listed above and upload it to your website, then link to it from your page with code such as:

<script type="text/javascript" src="SmoothMovement.js"></script>

Using SmoothMovement

Creating instances

To use SmoothMovement, first create an instance with code such as:

// create a new instance of SmoothMovement
var instance = new SmoothMovement(0, 0);

The first parameter is the initial position, and the second parameter is the initial target. Both values should be integers.

Changing the target

The target can be changed at any time by directly setting the target property:

// change the target to 100
instance.target = 100;

Updating the position

The position and velocity can be updated using the update function, which returns the new position. The position can also be accessed through the position property:

// update the position
var position = instance.update();

// update the position (alternative code)
instance.update();
var position = instance.position;

The hasStopped function

The hasStopped function returns true if the movement has stopped, and false otherwise. Note that this means that both the velocity and acceleration are zero (or equivalently, that the velocity is zero and the position is at the target):

// determine whether the movement has stopped
var stopped = instance.hasStopped();

The animate function

The animate function makes it easy to implement animation using SmoothMovement. The animate function is used in the example at the top of this article. The animate function takes three parameters:

interval

The interval between updates, in milliseconds. 20 is a common value for this parameter, equating to 50 frames a second.

updateListener

A function to call after each update. This function is passed the new position and the SmoothMovement as its first and second parameters.

stopListener

A function to call when the SmoothMovement has stopped. This function is passed the SmoothMovement as its parameter. This parameter is optional.

For example:

// animate a movement
instance.animate(
    20,
    function(position){
      alert('The current position is: ' + position);
    }
    function(){
      alert('The movement has stopped');
    });