This map interacts with mouse movements and hovers. It also travels through the selections beautifully. Added bonus of really lovely music, and you have a smashing happy forecast!
Lots of work put into this 2014 report. The website utilizes parallax, subtle animations, and a gorgeous layout. You’ll find yourself scrolling through all of it. It’s so beautiful the actual information contained in the site seems almost irrelevant.
This site is chocked full of funky interactions, sounds, and slightly cryptic information. It may or may not work, depending on how hard your browser is willing to think. In the event that it’s taking a break: basically you’ll be greeted by a fractured pattern with swirling, shifting fragments that track with your mouse and re-arrange into shapes and letters without warning. The portfolio need do little more as the landing page is more than enough explanation of expertise.
Pauline Osmont’s Portfolio
This site is all about elegant, subtle animations. Most of it is achieved simply through HTML and CSS. Take a close look and notice that nearly everything interacts. It’s beautiful, achievable inspiration.
One of my favorites, World Wildlife Fund’s “Tiger Challenge” is an incredible piece of art. The small dots re-arrange themselves into images, and scatter as you glide your cursor through them. While you’re playing around for the next couple minutes, also take time to appreciate the more subtle animations. See how many you can find.
We Ain’t Plastic
This site isn’t striking in it’s richness of animation. But I had to point it out because of subtle little things included. Notice the wonderful parallax, the typography, and even the menu. It’s a wonderful example of how small touches can take a rather typical (although certainly well done) portfolio into a true master piece. It’s all in the details!
This is a pretty extravagant customer recruitment campaign for a bank. It’s full of adorable little animations. And more than that, it’s exploding with interactivity. Although these animations won’t blow your mind, they demonstrate a nice marriage between UX and design.
The animation shown here wasn’t made with CSS, that’s for sure. Don’t be discouraged, web designers! This site certainly shows what is possible. Go ahead an immerse yourself in more traditional animations that have the added bonus of being interactive.
Five Foot Six
Check out these animations, which look to have been made in Adobe Aftereffects. After ooo-ing and aww-ing over the easing, you’ll notice that it’s the only animation on the site. But I’ve included it because one little well placed animation can change your entire site. See?
Ice & Sky
Another favorite! This site is so comprehensive in it’s use of animation. It’s cinematic, user friendly, wonderfully designed, and so much fun to explore. I encourage you to visit at least a few of the parts. Also, make sure to pause and enjoy the interactivity included in that state.