10 Websites with Beautiful Animations

On a website, animation enhances the overall image of the site and conveys impressions to users that can't be expressed through static visuals alone.
When producing a website, it requires careful coordination between engineers and designers in terms of vision and adjustments.
I often feel that things would go more smoothly if the type of animation we're aiming for could be shared from the very beginning.
So, let's take a look at the characteristics of each animation.

A site with rich motion that nonetheless doesn't feel heavy. Perhaps it's not that the site actually performs lightly—rather, the animations make it feel light and nimble. I'd love to reference this when producing a special-feature site.

SERPENTform

Source: https://www.serpentiform.bulgari.com/ja/home/

The main visual uses video. The loading animation that appears during page transitions combines multiple motions, so users don't feel like they're being kept waiting. This is a great reference for how to use animation effectively.

monopo

Source: https://monopo.co.jp/

Behind the X-shaped mask in the main visual, you can see motion, which makes the X stand out symbolically. Although these are videos, Apple's site has animations that run just as smoothly on smartphones as on PCs, giving users a cutting-edge impression. This kind of smooth motion is something to reference when creating websites.

apple

Source: https://www.apple.com/jp/iphone-x/

The loading animation is beautiful. The 1-2-3 rhythm of animations appearing in the top-left, bottom-right, and center creates a nimble, light feel. Also, perhaps because of controlled scrolling, you can experience a smoother glide than usual. This is a site worth checking out for the smoothness of its motion.

HOLLANDGREEN

Source: https://www.hollandgreen.co.uk/news/class-q-permitted-development-rights/

This site adds motion to each individual element, giving the screen a sense of rhythm. Multiple motions are used even for image displays, conveying the impression that the site was built using cutting-edge techniques. While each single motion catches your eye, it's the combination of fine, multi-layered motions that gives the site its richness. Combining multiple motions is something I'd like to incorporate into my own site production.

SUPERCROEDS

Source: https://supercrowds.co/what

In the main visual, the background mask moves to follow the mouse cursor. The scroll control suits the site's atmosphere, intensifying the overall impression of the site. This is a site where you can clearly see how scroll motion can transform the atmosphere—definitely worth checking out.

NIHYAKU-ICHI-DO

Source: https://201d.jp/

A site featuring a 3D Earth that moves in sync with scrolling. While holding down the mouse button, you can spin the Earth around freely. Combined with the color palette, it gives off a global impression.

clarity

Source: https://clarity.io/

The SVG animations triggered by scrolling skillfully take advantage of the web's vertically long page format. The visual explanations make the site enjoyable to look at. It's a great example of using visuals and animation to express what would otherwise be lengthy explanations.

JAPAN AIRLINE

Source: http://www.jal.com/ja/outline/brand/baton/

A modern site that makes use of 3D. You can feel a level of immersion—almost like a video game—that none of the previously introduced sites offer.

lattexplus

Source: http://festival.lattexplus.com/

A site where the main visual moves in response to mouse motion. The motion of the main visual while scrolling is also beautiful. Though it gives a calm impression, the light animations let you almost hear beautiful sounds through the visuals, enhancing the site's overall atmosphere.

DELAUNAY

Source: https://delaunay.jp/

How was that? I hope you've come to see how the presence or absence of animation on a website can change the impression users receive. It's something we should definitely keep working to refine in our implementations. In web production, there are many ways engineers and designers can communicate about animation implementation. While designers should do their best to convey their vision, engineers might also enjoy experimenting with animation based on the impression they get from the design. I hope this article serves as a useful reference for your own web production.