Animations

API

Arrays

Async

Basics

Challenges

Classes

Console

Dates

Debugging

DOM Elements

DOM Methods

DOM Navigation

DOM Properties

Event Listeners

Flow Control

Forms

Functions

Global Functions

JSON

Keywords

Libraries (3rd party)

Math

Modules

Objects

Snippets

String

Types

Widgets

Window Object

JavaScript - Basic Example

To demonstrate how to create HTML animations with JavaScript, we need a container element. All animations should be relevant to their container element.

The container element should be created with style = "position: relative". The animation element should be created with style = "position: absolute".

JavaScript animations are done by programming gradual changes in an element's style. The changes are called by a timer. When the timer interval is small, the animation looks continuous.


// pseudo code
var id = setInterval(frame, 5);

function frame()
{
    if (/* test for finished */)
    { clearInterval(id);}
    else
    {
        /* code to change the element style */
    }
}

This example is using the setInterval and clearInterval methods.

 

 

Links