This example shows how to use a `Dial` widget to animate an image sprite.

Drag the `Dial` handle, or use the keyboard arrow keys to see the duck image "animate".

{{>duck-source}}

The Image Sprite

The Markup

The `

` element will have the sprite as its background-image.

The `

` element will contain the dial.

{{>need-skin-note}} ``` {{>need-skin-comment}} ``` ``` {{>duck-markup}} ```

The JavaScript

The `stepsPerRevolution` attribute of the `Dial` is given a value equal to the number of frames in the sprite.

On `valueChange` of the `dial`, the `background-position` of `

` is changed to a new multiple of the width of one frame in the sprite.

``` {{>duck-script}} ```

Complete Example Source

``` {{>duck-source}} ```