Animação Básica para Protótipos com CSS e Javascript

Motion design está ficando cada vez mais importante, principalmente na hora de criar interfaces que engajem os usuários tanto funcionalmente quanto emocionalmente. Por isso eu resolvi começar a fazer mais experimentos com Javascript e jQuery para criar animações básicas para meus protótipos. Uma das ideias mais comuns para animações que me vem em mente é construir uma lista com itens animados. Para ilustrar isso eu vou compartilhar uma técnica simples que uso nos meus protótipos.

Para esse breve tutorial nós vamos usar HTML, CSS e Javascript. O processo todo não vai levar mais de 30 minutos.

Passo 1

Comece um novo documento HTML e adicione alguns elementos, uma "Section" e uma lista "UL" com alguns objetos "LI"

<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"><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>

Passo 2

Agora vamos importar jQuery e jQuery Transit plugin para nos ajudar a animar a lista.

<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"><style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png) 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><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>

Passo 3 - Animando a lista

Animar a lista é super simples, a primeira e mais importante parte a fazer é ter um pequeno script daquilo que você quer animar. Nesse primeiro caso nós vamos animar um LI de cada vez desaparecendo e indo para baixo (de cima para baixo).

O que estamos fazendo na função é encontrar cada "LI" e para cada um deles vamos setar com CSS para movê-los "-30px" no eixo Y (top) e mudar a opacidade para 0. Depois disso, com jQuery Transition nós vamos mover de volta para a posição original. Para garantir que cada um se mova em um tempo diferente, vamos setar um delay de 200 e multiplicar isso por "i" (cada elemento tem seu próprio "i").

Passo 4 - algumas rotações 3D

A única coisa que adicionamos aqui foi rotateX e transformOrigin no CSS e perspective e rotateX para a transição. Você pode brincar com esses valores para mudar as animações.

Conclusão

Abaixo você pode conferir um exemplo básico do que você pode fazer com Javascript simples. O melhor dessas animações é que elas usam GPU, e por isso funcionam bem em mobile devices e são perfeitas para protótipos.