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"

Passo 2

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

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.

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

About the author of this post

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. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.