It is hard to argue against the fact that we have become more addicted to energized projects that feature some process of movement. Whether it is a video, gif or animation we need and love the action in website design. Thankfully, developers are perfectly aware of this small yet all-consuming passion. So we are witnessing more and more websites with motion. Today we are going to talk about animations and their variety and usage.
Along with the maturation of CSS and HTML, animation is also becoming a more and more sophisticated and multifunctional instrument in developers’ arsenal. From simple effects that enhance a look of CTA buttons to huge complex animations that set scenes in motion, today you can stumble upon many different types of animation that populate the web. They are used for various purposes, not only for transforming a simple website into a ‘blockbuster’. They help to improve visual and user experience as well as enrich the general effect produced by a project.
We want to embrace various sorts of web animation including both old, time-tested and fresh, innovative ones to show how this sphere is managing to run wild. There are examples of storytelling animations, guiding animations, data animations, typography animations, subtle motion, particle animations, opening animations, waiting animations and walkthroughs. If you are interested, we also suggest taking a look at our previous article that concerns generative patterns, another refreshing type of animation.
So, let’s begin.
Animation in Website Design
Storytelling animation is used for taking the visual experience to absolutely new levels, thereby making storytelling an absorbing and captivating masterpiece.
Ice and Sky
Ice and Sky is an harmonious symbiosis of the fully illustrated environment and animations where each part plays a vital role in providing regular users with a top-notch visual experience. Use of lush watercolor-esque scenes skillfully bolstered by subtle motion is a win-win solution.
NBA FaceOff
NBA FaceOff encourages users to participate in a small yet pretty entertaining poll. Not only does it feature interesting statistics and images of players but it is also charged with motion and sports energy.
Subtle motion adds to a scene a dynamic feel and delicate charm.
Leg Work Studio
Leg Work Studio features a unique and ambiguous animation that kindles interest. It reinforces the name of the agency and grabs the attention.
Alticreation
Alticreation depicts a 3 dimensional polygonal scene that is supported by some subtle motion. It interacts with users and sets some elements of composition into movement for adding dynamics to the project.
Data animation is a fresh take on some boring elements that as it turns, out can add a true touch of delicacy and sophistication to a project.
Uber
Uber has an interesting dynamic background that conveys a stately sense of elegance and refinement. The dark, clean monotone backdrop in tandem with this small yet subtle animation greatly contributes to design aesthetics.
NewsTech
NewsTech has an incredible landing page where you can find numerous well-tuned infographics-inspired elements. Charts, pies, graphs and ghost buttons recreate an amazing overall atmosphere.
Type animation. Nothing can spoil crafty typography, the more so an animation that only emphasizes its artistic nature.
FiveFootSix
FiveFootSix gives the homepage a lovely touch of playfulness that calls the whole attention and establishes a friendly atmosphere. Bold, funny sketchy letters that are skillfully animated through JavaScript is the focal point that naturally catches the eye.
We Are Vangarde Music
We are Vangarde Music boasts an artistic vibe that is subtle and neat. Here typography plays the first fiddle, making the homepage look startling and intriguing. The complementary effect used for enhancing the main lettering is a nice touch here.
Guiding animation is similar to storytelling animation. It features obvious visual paths, demands user action and gently leads from one checkpoint to another.
Apps
Apps is a matchless website that unobtrusively directs you from the starting point to the end, gently forcing users to take part in the action as well as revealing an interesting story. Here the animation is the primary driving force that energizes the whole project, making interaction with users a mere pleasure.
History of Innovations
History of Innovations by AT&T lets you trace the history in an interesting and visually appealing manner. Refined line style illustrations are charged with a simple motion that softens transitions between time periods.
Mouse animation is a fresh sort of animation that marks various personal portfolios.
Berengere Audo
Berengere Audo leverages an animation with a geometric nature that ideally blends with the environment and adds playfulness to the personal portfolio.
Super Top Secret
Movements of the mouse cursor reveal a quite interesting, inventive and eye-catching animation that adds fluidity and subtlety to the project as well as makes it excel over others.
Walkthrough is a great instrument for making an app look more understandable. Although this solution is widely used by mobile app developers for demonstrating the basic routine, it looks exceptionally good on promotional landing pages.
Urban Walks
The official website of Urban Walks app has a quite decorative appearance achieved through gorgeous coloring, grunge touches and vigilantly crafted vibrant illustrations. Although the highly realistic iPhone device mockup looks here like a white crow, animated gifs of the app outshine this tiny drawback.
Dimes Card
Dimes Card also features a neatly crafted walkthrough that gives a notion about the app in a pleasant way. Thanks to such a solution, the idea of a program becomes more clear and straightforward to regular users.
Particle animation is a huge trend nowadays that you can find on various personal portfolios. Mostly the animation accompanies the cursor, recreating an eye-catching trace.
Double Pi
Double Pi has an appealing animation that goes perfectly well with the dark, minimalist environment of the front page and idea of the website. The trail of particles that follows the mouse cursor gives the project the wow factor.
Peugeot: Catch the Dragon
Catch the Dragon goes for a brilliant and highly energetic color scheme, lavish polygonal style, and a fantastic animation. The latter instantly seizes the overall attention, adding to the front page dynamics and emotions.
Waiting animation is all about brightening up a boring waiting process. Loading effects and spinners are time-tested solutions that have got a revamped appearance.
Mint Design
Mint Design has a sketch style animated loading bar that ideally fits into the fully illustrated surrounding of the website. Not only does it engage users while they are waiting, but it also sets the rhythm of the project.
Little Big Room
Little Big Room also adopts an artistic version of the preloading animation. It leverages a simple counter with a vibrant and eye-pleasing cartoonish appearance.
Opening animation aka Splash Screen usually lasts several seconds. However, that time is quite enough to strengthen the first impression that is so vital for numerous projects.
Panic
Panic features a typography animation that adds a friendly atmosphere. Hand-drawn type supported by some motion make the first few seconds on the site engaging and captivating.
BLKCND
The developer refers to the original purpose of splash screens. Thus, BLKCND greets the online audience with a primitive monotone black backdrop that features nothing more than one element – logotype, an integral element of brand identity.
Conclusion
Animation is a powerful instrument that in the majority of cases can save the day and make your project stand out. However, with great potential comes great responsibility, so finding an optimal balance that won’t overpower users is the key to success when it comes to incorporating animation into a project.
