Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes.

For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes.

Step 1

Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI"

<!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html>

Step 2

Now lets import jQuery and jQuery Transit plugin to help us animate the list.

<!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="<a href="http://code.jquery.com/jquery-1.10.1.min.js">http://code.jquery.com/jquery-1.10.1.min.js</a>"></script> <script src="<a href="http://code.jquery.com/jquery-migrate-1.2.1.min.js">http://code.jquery.com/jquery-migrate-1.2.1.min.js</a>"></script> <script type="text/javascript" src="<a href="http://ricostacruz.com/jquery.transit/jquery.transit.min.js">http://ricostacruz.com/jquery.transit/jquery.transit.min.js</a>" ></script> <style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(<a href="http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png">http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png</a>) center center; background-size: cover; margin: 0 auto; } ul, ul li{ margin:0; padding: 0; list-style-type: none; } ul { padding-top: 40px; } ul li{ background: #fff; margin: 0 11px 1px 11px; padding: 15px; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html>

Step 3 - Animating the list

To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top.

So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i").

Step 4 - some 3D rotations

The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well.

Conclusion

Below you can see a basic example of what you can do with simple Javascript. The best thing about these animations is that they use the GPU, that means they run very smooth in mobile devices and are perfect for mobile prototypes.

See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen

1117—13

abduzeedo