Web & Micro-animation

Following the article introducing the micro-animation by Osumi san, I would like to share my experience of applying micro-animation on websites.


What is micro-animation?

I believe most of the people are already heard about micro-animation(or some people called micro-interaction), but in this article, I would like to introduce about what micro-animation affects websites instead of talking about the definition. If you are interested in why use micro-animation in your design, please refer the article shared by Evelien Mooij-Gebler, or refer the article shared by Osumi san for getting started with micro-animation.

As Vamsi Batchu has shared

Attention to details is what basically differs an exceptional website from ordinary one.

Our final purpose of building a website is always to delight our users, and makes the website memorable. Since the website has its UX patterns, it’s getting harder to make a website stand out from other websites. The micro-animation is a solution for you to create an extraordinary website without breaking UX patterns.


When should use micro-animation?

Although micro-animation sounds like a great solution to websites, I don’t recommend you to put micro-animation everywhere. Sometimes over animated objects or too-slow animation will destroy user experience, and make your users run away from your website. Here are the three questions that I always ask myself before I add micro-animation to my websites.

1. Does UX will be a disaster without this micro-animation?

The micro-animation means the animation should be micro. Therefore, I suggest you consider it as a design that can be deleted and doesn’t affect the operation process at all, but if you have it, your design will be memorable.

2. Does it works and looks naturally?

I believe the timing and the place to use micro-animation is the animation looks like it just should be there. It might sound a little weird, but the fitness of micro-animation is one thing you should consider before actually putting it into your website. To create a natural micro-animation, the speed, the easing curve, and the movement are all the keys to a great interaction.

3. Do you enjoy it by yourself?

I believe a great micro-animation (or design) is the one that you can keep playing with it without being annoyed by it. If you found the micro-animations make you wait before actually doing something or the animation’s movement distracts your attention, maybe you should reconsider it.


Do you have any examples?

Yes! Here are some micro-animation examples that I have created.

1. My portfolio website

In the Contact Me section of my portfolio website, after users sent me a message, the paper airplane will take off from the table and return by itself. It implies the message is sent to the website owner, and you can write a new one.

Javascript Codes:

//take off the airplane after sent the message
$(".wpcf7").on('wpcf7:mailsent', function(event){
//create the flying path of the airplane
var path = [
{ x:120, y:-80 },
{ x:($(window).width() / 2), y:-200 },
{ x:($(window).width()), y:($(window).height() * -1) },
{ x:($(window).width()), y:($(window).height() * 1) },
{ x:($(window).width() * -1), y:($(window).height()) },
{ x:"+=0", y:"+=0" }
];

//animate the airplane
TweenLite.to($('.page-4 #contact_me_wrap #contact_me_title #contact_icon #airplane'), 7, {
bezier:{ autoRotate:false, curviness:2, values:path },
ease: Power4.easeInOut,
});

//animate shadow after airplane take off
TweenLite.to($('.page-4 #contact_me_wrap #contact_me_title #contact_icon #airplane .shadow'), 2, {
opacity:0,
ease: Power4.easeInOut,
onComplete:function(){
TweenLite.to($('.page-4 #contact_me_wrap #contact_me_title #contact_icon #airplane .shadow'), 0.6, {
opacity:0.3,
delay: 3.2,
ease: Power4.easeInOut
});
}
});
});

2. Marine World

In this website, I cooperated with Buzzhook, a Japanese design company, to create a delightful menu for our client. After users hover the buttons on the landing page, the SVG icons will animate.

SVG Codes: (Use the Open-Close icon as an example)

<svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
......
</g>
<!-- add a class name for css to animate it -->
<g class="time_line">
<rect x="11.658" y="2.669" fill="#ffffff" width="0.685" height="9.478"/>
</g>
</svg>

CSS Codes: (Use the Open-Close icon as an example)

#speed_menu .menu_box:nth-child(1) a .time_line{
/* set origin to the clock center */
transform-origin: 12px 12px;
}
/* use hover to add animated class, and use webkitAnimationEnd to remove class name  */
#speed_menu .menu_box:nth-child(1).animated a .time_line{
animation-name: time_run;
animation-duration: 0.8s;
transition-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
}
@keyframes time_run{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

3. Okawa Terrazza

Okawa Terraza is an information center based in Okawa, Japan. They approached us to develop an iPad WebApp for them. In this website, after users enter the map view, the logo background will slide down, and the logo will gradually change the color.

Html Codes:

<div id="logo" >
<div class="top_box">
<a class="disable-link" href="/" target="_self" rel="chapter" title="ホーム">
<img class="svg" src="/assets/img/logo.svg" alt="OKAWA">
</a>
</div>
<div class="bottom_box">
トップへ
</div>
</div>

CSS Codes:

#logo{
position: absolute;
left: 10px;
top: -14px;
width: 143px;
height: 179px;
transform-origin: center center;
border-radius: 0px 0px 5px 5px;
overflow: hidden;
transition: all 600ms ease;
transition-delay: 0ms;
box-shadow: 0px 0px 10px rgba(0,0,0,0);
}
#logo .top_box{
width: 143px;
height: 153px;
float: left;
position: relative;
}
#logo .top_box:after{
width: 200%;
height: 200%;
background-color: #ffffff;
content: '';
position: absolute;
z-index: -1;
left: -50%;
top: -50%;
transform: translateY(-200%) scale(0.6);
transform-origin: center top;
border-radius: 100%;
opacity: 0;
transition: all 500ms ease;
transition-delay: 0ms;
}
#logo .top_box a{
display: block;
width: 63px;
height: 95px;
margin-left: 37px;
margin-top: 38px;
}
#logo .top_box a .word{
transition: fill 400ms ease;
transition-delay: 0ms;
}
#logo .bottom_box{
width: 143px;
height: 26px;
float: left;
background-color: #CF8B2F;
color: #ffffff;
text-align: center;
font-size: 14px;
letter-spacing: 0em;
line-height: 14px;
box-sizing: border-box;
padding-top: 6px;
opacity: 0;
transition: all 400ms ease;
transition-delay: 0ms;
}
/* enter the map view */
#logo.active{
transition: all 600ms ease;
transition-delay: 600ms;
box-shadow: 0px 0px 10px rgba(0,0,0,0.16);
}
#logo.active .top_box:after{
transition: all 1000ms ease;
transition-delay: 0ms;
opacity: 1;
transform: translateY(0%) scale(1);
}
#logo.active .top_box a .word{
transition: all 600ms ease;
transition-delay: 600ms;
fill: #000;
}
#logo.active .bottom_box{
transition: all 600ms ease;
transition-delay: 600ms;
opacity: 1;
}

Conclusion

Micro-animation is a good way to enhance and enrich the user experience of websites, but it is not the only solution to delight your users. Before you start coding the micro-animation, I strongly suggest you make sure your website has a clear UX pattern. Micro-animation is useless if it is put on an unfriendly UI. However, it will be powerful and memorable if you put it in the right place.