Animations
API
Arrays
Async
Basics
Challenges
Classes
Console
Dates
Debugging
DOM Elements
DOM Methods
DOM Properties
Event Listeners
Flow Control
Forms
Functions
Global Functions
JSON
Keywords
Libraries (3rd party)
Math
Modules
Objects
Snippets
String
Types
Widgets
Window Object
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