At DrupalCon Dublin 2016, Nikhil Sukul and Vidit Anjaria will discuss animation with Drupal.

Basics of animation

History

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.

Definition

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.

Principles

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.

1. 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 bowler in a baseball game, just before the bowler actually throwing the ball. Based on the bowler body movements it is anticipated that the ball will be thrown.

2. 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.

3. 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.

4. 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.

Using Flash

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.

1. Closed source: Users must purchase Flash from Adobe and cannot make modifications to the software.

2. Security: Flash allows writing and running complex scripts on websites and scripts can be written that directly access the memory of a computer.

3. Performance: Flash websites can take a long time to load.

4. 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.

5. Plugin dependency: You need to have flash plugin installed in your browser. And every month or more, you need to update it.

Using CSS and JavaScript

To achieve animation on a website, we can use open source technologies like CSS and JavaScript.

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.

With JavaScript and jQuery, we use the animate() function and apply transformation and transition properties. Other functions are available in jQuery, which we can use directly: they are fadein(), fadeout(), slidedown(), slideup(), as well as the show() and hide() function for adding little delay, which will help to achieve animation.

A key to web animation is to hit the property which has less impact on the browser render capability.

Performance of the website depends completely on the technology we choose for implementation. While implementing robust logic, CSS animations will always be lighter than JavaScript animations. Most of the browsers use position, scale, rotation and opacity very lightly. If we are maintaining 60 fps (frames per second), it will not impact the performance as much. The higher we start on the timeline waterfall, the more work the browser has to do to get pixels onto the screen.

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.