Join the 85,000 open source advocates who receive our giveaway alerts and article roundups.
Use open source tech to achieve animation on a website
Get the newsletter
At DrupalCon Dublin 2016, Nikhil Sukul and Vidit Anjaria will discuss animation with Drupal.
Basics of animation
The first hints of 'animation' come from a pottery bowl in Iran, around 5000 years ago. Skip ahead to the 1500s, Leonardo Da Vinci had a few drawings depicting animations. And today, you might think of Walt Disney as the modern animation master.
To make sure we're on the same page: Animation is "the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement." Our eyes cannot view individual objects moving faster than 60 frames per second, so web animation is a series of computer graphics shown in succession at a rate faster than 60 frames per second.
There are 12 basic principles in animations: Squash and Stretch, Anticipation, Staging, Straight Ahead Action and Pose-to-Pose, Follow Through and Overlapping Action, Slow In and Slow Out, Arc, Secondary Action, Timing, Exaggeration, Solid Drawing, and Appeal. Here's a bit more on four of them.
Anticipation: The action predicted from the before action is known as Anticipation. For example, hitting a pile of wood with an axe requires an action of taking the axe back of our head and then hitting on the wood with tremendous force. Taking the axe back of our head is considered as Anticipation. Another example can be, body movements of a pitcher in a baseball game, just before the pitcher actually throws the ball. Based on the pitcher's body movements it is anticipated that the ball will be thrown.
Secondary Action: The reaction of the action is known as secondary action. For example, when a ball touches the ground and kicks up the dust. In this case, ball touching the ground is a Primary action and dust is getting kicked up is Secondary action. Another example could be, spilling out of water while a person is diving in the swimming pool, is a Secondary action.
Staging: When we need to show or highlight only one animated objects from the group of all, we use the staging method. For example, if we are creating a modal popup window which is stagedto show in the middle of the browser screen and disabling all other controls in the background.
Slow-in Slow-out: In animation every object start slow and then reached its appropriate speed and then should slow down to finish the animation. Or it can be that it start fast but slow down at the end to finish. In CSS this is known as easing.
Animation on the web started in 1987 with the invention of the animated GIF, or Graphic Interface Format. GIFs were used mostly for advertisements on websites, but had some problems with the pixelation. Then, in the 1990s Adobe introduced Flash, a tool for animating with audio. This created a revolution and was the best way to do animation on websites for a very long time. But Flash has some issues.
Closed source: Users must purchase Flash from Adobe and cannot make modifications to the software.
Security: Flash allows writing and running complex scripts on websites and scripts can be written that directly access the memory of a computer.
Performance: Flash websites can take a long time to load.
Resource hog: Flash uses a high amount of computing resources and can actually hang or crash your system if multiple applications or flash sites are opened at the same time.
Plugin dependency: You need to have flash plugin installed in your browser. And every month or more, you need to update it.
With CSS, we use animation, transition, and transform properties as parameters. When using animation property, the keyframe property must be used to divide the animation into small pieces. Then we apply necessary transition or transform properties to each piece.
A key to web animation is to hit the property which has less impact on the browser render capability.
From a business perspective, we can use animation almost anywhere, but mostly it is used to promote the features of a product, like online tutorials and courses, online games, e-commerce websites, interactive portfolios, and much more.