30 Awesome SVG Animation para sua inspiração
Designers usados para criar animações em elementos HTML usando CSS. No entanto, devido às limitações dos elementos HTML na criação de padrões, formas e outros, eles naturalmente se voltam para o SVG, que oferece recursos mais interessantes.
Trabalhando com o SVG, aproveitamos o bom supprot do navegador para animações SVG e temos mais maneiras de criar novas animações. Você pode usar tanto a funcionalidade de animação SVG embutida quanto a animação CSS3 (note que nem tudo pode ser feito por CSS, então ainda há necessidade de JavaScript). Outra maneira é usar mecanismos JavaScript como o GSAP ou o Snap. JS é uma boa prática para criar animação.
Aqui eu compilei alguns incríveis SVG animados. Alguns usam animação SVG, outros usam CSS para animação básica, e o restante usa a ajuda de JavaScript.
Animação de Borda por Sean McCaffery
Feito apenas com CSS, uma borda forma suavemente ao redor do texto, quando você passa o mouse sobre o “FLUTUAR” instrução.
Barra Lateral Elástica SVG por Nikolay Talanov
A barra lateral torna-se elástica quando você tenta retirá-la do lado. Um bom conceito aplicado em uma barra lateral de aplicativos inspirada no Material Design.
Puxe para baixo para atualizar por Nikolay Talanov
A maioria das páginas permite que você “Puxar para baixo” na página para atualizar. Com esta animação, quando você “lançamento” a página, o ícone Enviar muda para um ícone de Plano e é liberado para o ar.
Gradiente Animado em Texto de Patrick Young
Aqui está um sutil, mas não é fácil perder gradiente de texto em movimento que amantes de tipografia vão adorar.
Animação do Coração por Nikolay Talanov
Esta animação mostra como um ícone de coração é feito de dois círculos e um quadrado. A transformação é feita com animação CSS.
Vamos viajar por jjperezaguinaga
Uma animação que ilustra cidades e destinos turísticos populares no mundo. Os movimentos e transformações são criados usando animação CSS.
Menu toggle animação por Tamino Martinius
Uma animação morphing do ícone de hambúrguer, transformando-se em um ícone de cruz. Veja como a transição é suave entre os dois objetos.
Infográfico animado por Sdras
Uma animação incrível de Sarah Drasner, impulsionada pela linha do tempo do GSAP. É um infográfico que ganha vida, feito com animação. Use o controle deslizante para acessar os quadros de qualquer ponto.
Chuva-Bros não gosta de JS por cihadturhan
Uma animação de loop única e engraçada representando a caminhada dos personagens. O movimento dos objetos nesta demonstração é uma combinação de animação SVG e CSS3. As pernas usam animação SVG enquanto outras partes usam animação CSS3.
Relógio por Mohamad Mohebifar
Observe o movimento suave do ponteiro de segundos neste relógio, mostrando a hora atual. A animação é feita completamente usando a funcionalidade de animação SVG.
Homem de foguete de arco-íris por Chris Gannon
Um astronauta atirando no espaço com seu jet pack movido a arco-íris (?). Boa animação feita usando o plugin GSAP Tweenmax.
Ícone animado por Luigi De Rosa
No entanto, sobre esses ícones SVG animados para verificar o que eles podem fazer. O criador fez isso usando o GSAP.
Flat Workspace de Hoàng Nhật
A animação ilustra um espaço de trabalho no design de estilo simples. O criador usou o GSAP para fazer essa animação incrível de uma estação de trabalho formando.
O ícone animado clicável de Hamish Williams
Esta é uma animação legal faz uso da biblioteca snap.svg. Clique para ver o correio sendo “enviei”.
Mergulho por Chris Gannon
Você já pulou pedras na superfície de um lago? Aqui está uma simples animação de caminho SVG ilustrando isso, mas sem pedras e sem lago.
Motion para a web por LegoMushroom
Tem animação, uma boa melodia, entrada legal para o texto, o que não é para gostar? Isto é construído com mo.js, uma biblioteca JavaScript de gráficos em movimento.
Fonte de escrita animada por Lee Porter
Além de usar SVG para fazer a animação de caminho esboçar uma forma, você pode usá-la em tipografia como o que esse criador fez. O efeito de borrão torna mais impressionante.
Menu pegajoso de Lucas Bebber
Divirta-se com o efeito pegajoso neste design, que é feito usando o filtro SVG e adicionando animação CSS. O resultado é realista e muito legal, e você pode jogar com quatro versões diferentes.
Bolo novo por Marco Barría
Como fazer um bolo de aniversário em camadas feito com animação SVG e CSS.
Obrigado por Rachel Smith
Basta ver esta incrível animação de uma simples nota de agradecimento. É criado usando a biblioteca SVG e GSAP TweenMax.
CSS vs SVG de Mario Sanchez Maselli
Agora vamos olhar a comparação sobre CSS e animação SVG, você vê a diferença?
Cão ambulante por Mark Nelson
Outra maneira de animar o SVG é usando imagens de sprites, como o criador fez.
Carregador de ampulheta de Leela
Um trabalho criativo feito usando animação SVG pura (SMIL); sem CSS ou JS para animar as coisas aqui.
Animação de logotipo por Adem ilter
Aqui está um belo logotipo animado usando a animação SVG embutida. Nenhum CSS ou JS foi usado para fazer tudo funcionar.
Animação de estatísticas por Jonas Badalic
Um belo gráfico de estatísticas com animação SVG desenvolvido pela biblioteca Snap.SVG.
Ouroboros por Noel Delgado
Um incrível caminho de animação SVG. Primeiro, o criador desenhou uma rota de caminho no SVG, antes de usar tween.js para adicionar animação.
Efeitos Gooey criativos por Lucas Bebber
Aqui estão sete usos criativos do filtro SVG para criar um efeito parecido com o do gooey. O visualizador de música é meu favorito, a animação parece muito legal.
Jogue a vaca por Sarah Drasner
Esta é uma animação SVG desenvolvida pelo TweenMax, mas feita apenas por diversão. Segure e arraste a vaca ao redor do planeta. Ele vai girar em "órbita".
Logotipo Animado por Ali
A animação pode ser uma boa adição para um logotipo de cerveja borbulhante. As pequenas bolhas flutuantes são construídas puramente com a sintaxe de animação nativa SVG.
