Although it isn't clear when or where animation was first created, storytelling has been around for hundreds of years.
Shadow puppetry has been around since 200 A.D., and magic lanterns in the 1650s have made it possible to tell stories through motion.
Joseph Plateau invented the Phenakisticope in 1832. This was the year that the first widely used animation device was created. Fluent illusions of motion were created using the persistence of vision principle. Persistence of vision is when multiple images merge into one moving image in the brain. Below is an example.
What is Animation?
William George Horner, an 1834 inventor, created a motion picture projector similar to the one shown above. He placed the drawings inside a drum that rotated in a circular manner. This was one the most important innovations that helped to create the basis for film projection. It was originally called the Daedatelum by Horner, meaning "the wheel of devil", but Pierre Desvignes, the French inventor, changed its name to the Greek word for "things which turn," or the Zoetrope.
Animation: What is it?
These pioneering feats in animated motion laid the foundation for animated videos today. If we want to know who was the most influential in the creation of animated movies, then we can look at the "Father of Animation" or themselves.
The Father(s), of Animation
History has shown that animation was created by many people. Even two "firsts" seem to exist.
James Stuart Blackton is the father of American animation. Although Blackton is a British filmmaker but he created the first animation in America. He also used the stop motion technique.
Animation overview for business: Looney Tunes financial boons
Animation is a popular technique for businesses in the digital sector, even if it's not used on TV or film. Animation is a great tool for web/app design, digital marketing campaigns and has many practical benefits.
Motion graphics are animating elements such as icons, typography, and on-site images. Motion graphics (that is, animating elements like icons and typography) are used to communicate concepts through movement. Although motion graphics are not as much about storytelling as animated videos but still offer many of the same benefits as animation, they do have a unique way to convey those benefits. The right motion graphics can make a website more functional. They also have secondary delights, such as teaching visitors how to use the site efficiently, effectively, and visually.
Let's suppose you just added a new feature to your site, but analytics don't show that anyone is clicking it. It could be that they don't even see it. Regular users might be so familiar with the screen that a new feature might go unnoticed. You can add animation to the feature by making the icon move, or pulsing a notification dot.
Animations like these can make a huge impact on UX. To make sure that users can see the most popular pages, you can add animated flourishes. To increase conversions, you can focus more attention on calls-to-action. Animation can be used to confirm an action, such as a button that clicks and moves. Motion graphics can be fun and even add some entertainment, such as easter eggs visuals that move when the user hovers over them.
Motion graphics has the advantage of communicating cause and effect to users. This is especially true for mobile devices that use gesture controls. Think about Tinder's famous swipe--the animation that shows the page being moved left or right increases the illusion of interactivity. It's almost like you are actually moving something. Imagine if the screen flashed and loaded a new profile every time you swipe. It wouldn't be nearly as much fun.
There are many other ways animation can be used for business. But here are some examples:
Explainer videos--Animated explainer videos are a popular use of animation in modern business. They add humor to otherwise boring and uninteresting instructional videos. Without being too boring, businesses can easily explain the details of their services. This trend is so popular that businesses need to choose more innovative animation styles in order to stand out.
Loading pages - No one likes staring at an empty screen. Loading pages animations can not only reduce loading times and minimize the risk of your user falling asleep, but they also allow you to display your brand personality and make your user smile. Sometimes a loading animation is more memorable than the actual site.
Transitions--Anyone familiar with an old computer will know how disorienting it can be to see new windows open and not have to do anything. Animated transitions (swipes and wipes, gradient fades and shrinking, among others) rely on the biology of our eyes to make visual changes as smooth as possible. This adds to the app or site's immersion. Animation can make even minor visual changes, such as drop-down menus, more appealing.
Microinteractions--Motion graphics have plenty of UX benefits. Adding animated micro-interactions to your interface design can help you solve problems. An animated effect can be added to a call-to action to improve conversions.
Animation for social media--Animation's core purpose is to entertain and share a story. Sometimes animated videos can be made just for the sake of it. Small brands can get noticed on social media, while big brands can stand out in the feeds of their followers by creating animated videos.
Advertisements--Advertisements also benefit from the attention that animation attracts. Banner ads are especially important because they need to attract as much attention as possible to overcome banner blindness. You can convert with the right animation style. Launchpeer proved this point with an animated Instagram ad.
Animated logos - While traditional advertising advice says "never alter your logo", branding experts today say animation is an exception to that rule. Responsive and animated icons, which are logos that adapt to the context of their use, have been shown to be more effective than static ones.
We've only been discussing the theory behind animation so far. Let's now discuss the different types of animation available and how to use them.