Rotoscoping is an animation technique where animators trace over live action footage, frame by frame, to produce realistic action. Animators originally projected photographed live-action images onto a glass panel and traced over the image. The equipment used in projection is referred to as a rotoscope, developed by Max Fleischer. Although the rotoscope has been eventually replaced by computers, the process itself is still called rotoscoping.
It’s a form of stop-motion animation which incorporates motion blur into each frame involving motion. It was co-developed by Industrial Light and Magic and Phil Tippett.
Animation isn’t limited to cartoons and other forms of animated films anymore. Simple, eye-catching animations have been introduced to web pages. They play a vital role in enhancing user interface and are fun and user friendly when used in the right sense and amount.
This does not mean that web animations need to always be minimal to deliver their purpose. Sometimes a larger or more complex animation can produce interesting results. It all comes down to what works best with different web pages, but a good rule of thumb is to never overcomplicate and mix too many visual effects together to not confuse the viewer.
Web animation gives the user cues in the form of guidance to navigate the website or application, or as an animated infographic that highlights certain statistics, and even a simple hovering effect is considered an animation and can boost the user experience.
The tools needed to create such animations have become more accessible and easier to implement than before. For example, Flash is no longer needed to produce more complicated animations.
Today’s animations don’t bog down websites or web servers, making effects quick to load for users and with high-speed internet access animations don’t skip of get stuck midway through the event cycle.
When it comes to animating for the web, it falls into two equally easy to understand categories: large and small. (You can probably guess how these look).
Large animations are ones that have a scale to them. Often in the form of a video with a run time, large-scale animations fill a significant portion of the screen and are characteristic of a short movie. These animations serve as a focal point in the overall design. Users often don’t have to perform any action to see the animation in motion. If you watch closely in the Studio Meta site, each of the large images zooms as you read the copy.
Small animations are the little bits and pieces that you discover as you start interacting with a website. These divots might be in the form of hover states, tiny bits of ornamentation or usability guides or tools. Small animations are an accent that contribute to the overall aesthetic, but are unlikely to be the focus of the design. In the site for Henry Brown the simple animation is that if you look closely, the eyes in the illustration actually blink.