Primeiro, uma recapitulação:
As animações ambientais são o tipo de movimentos passivos que você talvez não perceba a princípio. No entanto, eles dão vida a um design de maneiras sutis. Os elementos podem fazer uma transição sutil entre as cores, mover-se lentamente ou mudar gradualmente de posição. Os elementos podem aparecer e desaparecer, mudar de tamanho ou girar lentamente, acrescentando profundidade à personalidade de uma marca.
Na Parte 1, ilustrei o conceito de animações ambientais recriando a capa de um gibi Quick Draw McGraw como uma animação CSS/SVG. Mas sei que nem todo mundo precisa animar personagens de desenhos animados, então, na Parte 2, compartilharei como funciona a animação ambiente em três projetos muito diferentes: Reuven Herman, Mike Worth e EPD. Cada um demonstra como o movimento pode melhorar a identidade da marca, personalidadee contar histórias sem dominar uma página.
Reuven Herman
O compositor Reuven Herman, radicado em Los Angeles, não queria apenas um site para mostrar seu trabalho. Ele queria transmitir sua personalidade e a experiência que os clientes têm ao trabalhar com ele. Trabalhar com músicos é sempre estimulante criativamente: eles são críticos, engajados e cheios de ideias.
A formação clássica e jazzística de Reuven me lembrou o trabalho do designer de capas de álbuns, Alex Steinweiss.
Fui inspirado pela profundidade e textura que Alex trouxe aos seus designs para mais de 2.500 capas exclusivas e queria incorporar suas técnicas em minhas ilustrações para Reuven.
Para dar vida às ilustrações de Reuven, segui alguns princípios básicos de animação ambiente:
- Manter animações lento e suave.
- Faça um loop perfeitamente e evite mudanças abruptas.
- Usar camadas para construir complexidade.
- Evite distrações.
- Considerar acessibilidade e desempenho.
Você pode ver esta animação ambiente em meu laboratório. Para o site de Reuven:
- As linhas da pauta das partituras se transformam entre estados ondulados e retos.
- As notas flutuam em velocidades diferentes para criar uma profundidade semelhante à paralaxe.
- As teclas do piano parecem flutuar.
Meu primeiro passo é sempre otimizar meus SVGs para animação, exportando e otimizando um conjunto de elementos por vez — sempre na ordem em que aparecerão no arquivo final e construindo o SVG mestre gradualmente. Trabalhando a partir do fundo, exportei as linhas da pauta da partitura, primeiro em seu estado ondulado.
…seguido pelo seu estado direto:
O primeiro passo na minha animação é transformar as linhas da pauta entre os estados. Eles são compostos por seis caminhos com traços multicoloridos. Comecei com as linhas onduladas:
Embora o CSS agora permita a animação entre pontos do caminho, o número de pontos em cada estado precisa ser igual. O GSAP não possui essa limitação e pode animar entre estados que possuem diferentes números de pontos, sendo ideal para este tipo de animação. Eu defini o novo conjunto de caminhos retos:
const Waves = {
p1: "[…]",
p2: "[…]",
p3: "[…]",
p4: "[…]",
p5: "[…]",
p6: "[…]"
};
Em seguida, criei uma linha do tempo GSAP que se repete para frente e para trás durante seis segundos:
const waveTimeline = gsap.timeline({
repeat: -1,
yoyo: true,
defaults: { duration: 6, ease: "sine.inOut" }
});
Object.entries(Waves).forEach(([id, d]) => {
waveTimeline.to(`#${id}`, { morphSVG: d }, 0);
});
Outro princípio da animação ambiente é usar camadas para aumentar a complexidade. Pense nisso como construir uma mixagem de som. Você deseja variação de ritmo, tom e tempo. Na minha animação, três fileiras de notas musicais se movem em velocidades diferentes:
A duração da animação de cada linha também é definida através do GSAP, desde 100 para 400 segundos para dar à animação geral um efeito de paralaxe:
const noteRows = [
{ id: "#notes-row-1", duration: 300, y: 100 }, // slowest
{ id: "#notes-row-2", duration: 200, y: 250 }, // medium
{ id: "#notes-row-3", duration: 100, y: 400 } // fastest
];
[…]
A próxima camada contém uma sombra projetada pelas teclas do piano, que gira lentamente em torno do seu centro:
gsap.to("shadow", {
y: -10,
rotation: -2,
transformOrigin: "50% 50%",
duration: 3,
ease: "sine.inOut",
yoyo: true,
repeat: -1
});
E, finalmente, as próprias teclas do piano, que giram ao mesmo tempo, mas na direção oposta à sombra:
gsap.to("#g3-keys", {
y: 10,
rotation: 2,
transformOrigin: "50% 50%",
duration: 3,
ease: "sine.inOut",
yoyo: true,
repeat: -1
});
A animação completa pode ser visualizada em meu laboratório. Ao sobrepor o movimento cuidadosamente, o site parece vivo sem nunca dominar o conteúdo, o que é uma combinação perfeita para a energia de Reuven.
Mike Worth
Como mencionei anteriormente, nem todo mundo precisa animar personagens de desenhos animados, mas eu preciso ocasionalmente. Mike Worth é um compositor de filmes, videogames e TV ganhador do Emmy que me pediu para criar seu site. Para o projeto, criei e ilustrei o personagem do aventureiro orangotango Orango Jones.
Orango provou ser o tema perfeito para animações ambientais e recursos em todas as páginas do site de Mike. Ele leva o leitor a uma aventura e, ao longo do caminho, eles experimentam a música de Mike.
Para a página “Sobre” de Mike, eu queria combinar animações ambientais com interações. Orango está em uma caverna onde encontrou uma placa de pedra com marcas tênues que servem como auxílio à navegação para outros lugares no site de Mike. A ilustração contém um recurso oculto, um ovo de páscoa, como quando alguém pressiona a lupa de Orango, movendo raios de luz para dentro da caverna e para o tablet.
Meu SVG é deliberadamente estruturado e, de trás para frente, inclui a caverna, o poço de luz, o Orango e a navegação:
Também adicionei uma âncora ao redor de um círculo oculto, que posicionei sobre a lupa de Orango, como um grande alvo de toque para ligar e desligar os feixes de luz, alterando o data-lights valor no SVG:
Então, adicionei dois seletores descendentes ao meu CSS, que ajustam a opacidade dos feixes de luz dependendo do data-lights valor:
[data-lights="lights-off"] .light-shaft {
opacity: .05;
transition: opacity .25s linear;
}
[data-lights="lights-on"] .light-shaft {
opacity: .25;
transition: opacity .25s linear;
}
Uma rotação lenta e sutil adiciona movimento natural aos feixes de luz:
@keyframes shaft-rotate {
0% { rotate: 2deg; }
50% { rotate: -2deg; }
100% { rotate: 2deg; }
}
Que só é visível quando o botão de luz está ativo:
[data-lights="lights-on"] .light-shaft {
animation: shaft-rotate 20s infinite;
transform-origin: 100% 0;
}
Ao desenvolver qualquer animação ambiente, considerar o desempenho é crucial, pois embora as animações CSS sejam leves, recursos como filtros de desfoque e sombras projetadas ainda podem sobrecarregar dispositivos de menor potência. Também é fundamental considerar a acessibilidade, por isso respeite a opinião de alguém prefers-reduced-motion preferências:
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
Quando um recurso de animação for puramente decorativo, considere adicionar aria-hidden="true" para evitar que ele atrapalhe a árvore de acessibilidade:
[…]
Com Orango Jones de Mike, a animação ambiente muda de uma atmosfera sutil para uma narrativa divertida. Os raios de luz e as interações suaves tecem a narrativa no design sem roubar o foco, provando que a animação pode apoiar tanto a identidade da marca quanto a experiência do usuário. Veja esta animação em meu laboratório.
DEP
Afastando-se dos compositores, a EPD é uma empresa de investimentos imobiliários. Eles me contrataram para projetar conceitos criativos para um novo site. Uma pesquisa rápida por empresas de investimento imobiliário geralmente deixará você desanimado com os designs de sites intercambiáveis. Eles incluem banners de largura total com fotos desbotadas de skylines genéricos de cidades ou pessoas etnicamente diversas apertando as mãos.
Para a EPD, eu queria desenvolver um estilo visual diferenciado que a empresa pudesse possuir, então propus skylines gráficos e estilizados que refletissem tanto a marca da EPD quanto seu portfólio global. Eu os fiz usando círculos de vários tamanhos que lembram o logotipo da empresa.
O objetivo de uma animação ambiente é que ela não domine. É um elemento de fundo e não um apelo à ação. Se os olhos de alguém são atraídos para isso, provavelmente é demais, então eu retardo a animação até parecer algo que você só perceberia se estivesse realmente olhando. Criei três designs de horizonte, incluindo Dubai, Londres e Manchester.
Em cada uma dessas animações ambientais, as rodas giram e os grandes círculos mudam de cor em intervalos aleatórios.
Para começar a otimizar esta ilustração para animação, exportei os caminhos base contendo todos os elementos, exceto a roda:
Em seguida, exportei uma camada contendo o circle elementos que quero mudar de cor.
Mais uma vez, usei o GSAP para selecionar grupos de círculos que piscam como luzes no horizonte:
function animateRandomDots() {
const circles = gsap.utils.toArray("#banner-dots circle")
const numberToAnimate = gsap.utils.random(3, 6, 1)
const selected = gsap.utils.shuffle(circles).slice(0, numberToAnimate)
}
Então, em intervalos de dois segundos, o fill a cor desses círculos muda do sotaque azul-petróleo para a mesma cor esbranquiçada do resto da minha ilustração:
gsap.to(selected, {
fill: "color(display-p3 .439 .761 .733)",
duration: 0.3,
stagger: 0.05,
onComplete: () => {
gsap.to(selected, {
fill: "color(display-p3 .949 .949 .949)",
duration: 0.5,
delay: 2
})
}
})
gsap.delayedCall(gsap.utils.random(1, 3), animateRandomDots) }
animateRandomDots()
O resultado é um horizonte que pisca suavemente, como se a própria cidade estivesse viva. Finalmente, girei a roda. Aqui não houve necessidade de usar GSAP, pois isso é possível usando CSS rotate sozinho:
#banner-wheel {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: rotateWheel 30s linear infinite;
}
@keyframes rotateWheel {
to { transform: rotate(360deg); }
}
As animações CSS são leves e ideais para efeitos simples e repetitivos, como fades e rotações. Eles são fáceis de implementar e não requerem bibliotecas. O GSAP, por outro lado, oferece muito mais controle, pois pode lidar com a transformação de caminhos e cronogramas de sequência. A escolha de qual usar depende se eu preciso do precisão do GSAP ou o simplicidade do CSS.
Ao manter a roda girando e os círculos brilhando, as animações do horizonte permanecem em segundo plano, mas dão ao design uma sensação distinta. Evitam os clichés das fotografias ao mesmo tempo que reforçam a identidade da marca EPD e são a prova de que, mesmo num sector conservador como o investimento imobiliário, a animação ambiente pode adicionar atmosfera sem prejudicar a mensagem.
Concluindo
Das texturas musicais de Reuven ao Orango Jones baseado na narrativa de Mike e aos horizontes brilhantes do EPD, esses projetos mostram como animação ambiente se adapta ao contexto. Às vezes é puramente atmosférico, como notas flutuantes ou rodas giratórias; outras vezes, combina perfeitamente com a interação, recompensando a curiosidade sem atrapalhar.
Quer ecoe a improvisação de um compositor, sirva como um dispositivo narrativo lúdico ou acrescente uma distinção subtil a uma indústria conservadora, os mesmos princípios são verdadeiros:
