While on the internet, you use HTML to communicate all the basic information that you need to. If you want to go beyond basics to create a message that will resonate with your users, you will definitely need animations. The more you make an experience rich with sensory input the more people respond to it positively.
![web]()
If you cannot implement some of these features in your site, be sure to get help from professionals. They have a great team of designers and developers that can help you get the results that you need.
Depending on the complexity of the animation, or the level of user interaction, you can use various types of animations on your web pages. The main types of web animations include:
1. CSS animations
CSS transitions and animations should ideally be used for user interface elements and basic transitions. CSS animations are generally easy to create, but very difficult to use for intricate illustrations.
Animating several elements on a page, especially those that cause reflows or those with non-performing properties, can cause a hit in page performance. They can also be difficult to change later on if you need to tweak the animation.
However, using transitions over animations allows for better performance and make them easier to work with.
The thing to remember is, as long as the animations you require are not complex, you should ideally use CSS, especially for simple interactions using animations and transitions.
2. JavaScript animations
If used with specialized animation libraries like Velocity.js or GSAP, these animations can perform very well and even outperform CSS animations. JavaScript animations are the best option when it comes to more complex animations that involve several elements on a page.
DOM elements would be preferable to use since they improve user interactions allowing you to do amazing things like hovering or slowing down animations. If you need many animated user interactions with SVGs or HTML elements, DOM based JavaScript animations are the best option.
3. Scalable Vector Graphics (SVG)
Scalable Vector Graphics (SVGs) are 2D vector based images with support for animation and interaction. The SVGs features and behavior are defined using an XML file. This means that the file can be indexed, searched, compressed and scripted.
SVGs are better created using drawing software, but are simple enough to be created with any text editor. All web browsers can support rendering of SVG animations and images, but up to different degrees.
A great thing about SVGs is that they can be animated using JavaScript and CSS in their pure form. CSS animations transform and states like hover can be used with SVGs. With JavaScript, the list of things that can be done is endless.
SVG animations can also make use of libraries like GSAP or snap.svg depending on the type of animation required.
4. SMIL
Synchronized Multimedia Integration Language, commonly referred to as SMIL, is a markup language used to animate SVGs without the need for JavaScript or CSS. In fact, with SMIL, you can create animations that are more complex than what CSS can possibly handle.
The main downside of SMIL is that it is not supported by Internet Explorer and IE still has a large market share of browser usage. There are some workarounds of SMIL that try to use Internet Explorer, but they don't perform very well because they are not natively supported by the browser.
5. Graphics Interchange Format (GIF)
GIFs are good for simple animations, especially if you are conversant with how to make them. They are simple because they do not call for much interaction from the user. They can however have a transparent overlay in part or in whole so that it is clickable.
GIFs are perfect for the following user cases:
- For short low resolution, clips and animations.
- For images with sharp edges and color distinctions, for example, logos.
- GIFs can also be used to store 2D images or animations as one large scene, for example, in games.
Needless to say, GIFs are very commonly used on the internet. GIFs started their journey as a combination of bitmap images supporting animations in a low 8bit resolution. The images are compressed with the LZW format, but the output file is still comparatively larger than other animations.
GIFs are not a good option if you want to:
- Create a dynamically generated animation.
- Have more than just basic interaction.
- Create 3D environments.
6. Video
These days you can find a video as the full screen background of a website. A good example of such a site is paypal.com.
Making use of, and interacting with, videos in this way has been made possible because of the <video> element.
7. Canvas
Canvas is widely utilized to create used complex animations for the web because it performs very well. It uses a DOM element and paints over it, over and over like on a real canvas. You can use JavaScript to keep track of what has been painted and where in order to come up with great animations and games.
The main disadvantage of using a Canvas, however, is that it is not able to scale very well. Generally, it is more difficult to create a responsive Canvas animation than it is with some of the other animations.
The Google search page usually has doodles or animations created using a canvas, especially when they require interaction. When no interaction is required, Google commonly uses GIFs.
Using a canvas can be made much simpler using libraries and plenty of them exist. Some of these libraries include:
- KineticJS
- EaseJS
- FabricJS
- PaperJS
8. Flash
These days, Flash animations should be avoided because most browsers are gradually ending support for Flash. You will also find that most mobile devices do not support Flash. Flash animations are also less responsive and are bulkier than other animations mentioned above.
As you may have observed from the preceding examples, there are several ways to create animations for the web. The method that you choose to use should depend on how you want to use it. Think about how you want your animation to behave and how you want it to interact with your users and then decide on the best method for your choice of animation.