Create Basic Animation

- Home
- Tutorials
  - Basic Animations
  - Parallel Animations
  - Sequence Animations
  - Timing Dictionary
  - Timing Functions
- References
- About

Web Animations Tutorial

Web animations is to have a flash or GIF animation intergrated onto the web page. Normal web animations still require the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this tutorial, we will be showing you how to create animations using javascript without the need of installing plugins.

Create a new basic animation

To create animations on objects such as moving left, right, up, down, change colours, etc, use the following interface:

`new Animation(element, {effect(s)}, {optional: timed items});`

- 'new Animation' creates an animation object, 'element' is the DOM object or animation target that we want to animate and it is a compulsory component and can be nullable. For instance, 'element' can be a 'div' with, a 'p' (paragraph).

- 'effects' defines the types of effects in animation such as move left, or right, or change colours, or change opacity, etc. 'effects' is also a compulsory component as well as nullable. This parameter can be of AnimationEffect object or CustomAnimationEffect object. These effects will be shared with any other animation objects referring to the same AnimationEffect or CustomAnimationEffect object. In the case this component being null, the animation will have a null effect.

- 'timed items' can be of type double or timing dictionary and is nullable and optional component. When this parameter is double, then it specifies the duartion of a single iteration of the animation. If it is null, then the default value for iteration duration would be zero is specified in the Timing Dictionary.

- Create Basic Animation
- Basic Info
- Exercise 1
- Exercise 2
- Exercise 3
- Exercise 4
- Exercise 5