Animation in the present

Animation has made its way into Web Design, and since then things have never quite been the same. Animation is fun, attractive and user friendly. Animation is essentially when still forms are given life. They move and interact with the environment around them; similar to something spinning across the screen while loading a webpage. 

Originally animation was mostly associated with cartoons or short films, but nowadays animation is pretty much everywhere. Designers have found a way to integrate it into their creations through the use of formats such as; GIF, CSS,SVG, and WebGL. They can be interactive , like the darkening of a button once pressed on, or they can be moving right in front of you.

Tasteful animated Web Designing is simple and effective. It shouldn’t over stimulate the viewer. The best part about Animated Web Content is that it can guide the user. It catches their attention and brings interest.

Animation is created by the following:

• Timelines
• Keyframes

Timelines

Timelines are a section in every Animation software that displays where the frames and animations occur. Of course, timelines were once displayed on paper too, but today we will be focusing more on the digital aspects. A frame is where a  picture is drawn that when put together, form motion. Animation documents are divided into many frames, the most common frame rate is 24fps.

 Tied together with frames are layers. You can think of animation layers as an onion skin, each of them overlap with the other thinly with slight variations that are displayed on the ‘stage’. Also for those of you who are not aware, the ‘stage’ is where your animation takes place. 

Keyframes

Keyframes are used to determine where an animation starts and ends. For example, In a jump animation the first key frame would be when the person is on the ground, the second key frame would be right in the middle and the final frame would be back in the starting position. All the frames in between are supposed to smoothly transition between those three points. 

The keyframes give a general idea of the movement you are trying to create, alone they cannot produce the illusion of movement. A simpler way would be to think of them as reference points. A great software for animation that most web designers use is one called Adobe Animate. Most likely anyone with a profession in design will do their work with Adobe Software’s.

I hope by the time you reach this section you will have a little more knowledge than you did before, until next time!