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"

Step 2

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

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
abduzeedo's picture
Abduzeedo Editor

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials.

RAWZ

Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple