In today's world animation is not only limited to just showing moving characters, in-fact animation is everywhere from small hover effects to touching screen in the smart phones. Animation happens when something made in still or two-dimensional shape is "enlivened" and seems to move in a way that takes after laws of material science. It's the way a cartoon character strolls over the screen or how an application symbol bounces like a ball while it is loading on the desktop of your Mac.
Web animations often use the format like GIF, CSS, SVG or WebGL. A good animation should be something like which is hard to avoid. Animation in websites templates is trending more day by day to give look and feel to interface. Even a small and simple animation in websites templates is interesting but too many animations over a page are also not good from a user point of view, it can cause a bad impression too.
Large vs Small Animations:
When doing animation for the site templates, it can be divided into two categories - large animations and small animations. Not necessarily large animations are good than small animations, it depends on the best theme of the site templates. Sometimes large animations are clumsy and sometimes small animation does the things that look out of the box.
Large animations are often in the form of video with a run time and occupies the large screen volume user need not to put extra efforts to see the animation over the screen, they automatically appears either in the form of pop-ups or something else.
Small animations appears in pieces time to time as you start exploring the websites templates may be some kind of text hover, ornamentation effects and tools. Small animations add complement to overall site templates and give stylish look, however are unrealistic to be the center of the plan.
When to use Animations:
The very first reason to use animation is to increase usability. It also depends on user needs and activities. For example giving animation to a button to show which button to click or where to go next in site templates site map. Other user situation like giving animation while filling the form showing correctness of a form or highlighting some text.
Types of Web Animations:
Interface Animations: It’s a type of animation that make user to know what they are doing in the particular section of a website templates for example if user click on a submit button then a message will appear that submission is registered.
Waiting Animations: These animations are used when a user is waiting for some action to happen, for example user is waiting for the feedback submission confirmation. So in between the time some animation are inserted to entertain the user while waiting so that the person do not freak out. Because if such thing would not happen then user might make perception that something is going wrong.
Story Telling animations: These are used to introduce something in form of a story or to share the experience of those website templates that leads to its creation.
Purely Decorative animations: Purely used for decorative purpose. No usefulness from the user point of view. Sometimes these animations run continuously while user is busy to see the site templates content and other things.
Following points must be remember while adding animations to the website templates :
Start with the small animation
Keep duration low or speed should be fast enough
While making objects to move, give them a little time to slow down or speed up
Good Animation will make the user experience better can be in any form like fun, positive experience etc. Animation is no longer a new experience to the web designers. It’s becoming the basis of interaction design.