Este tutorial mostrará como construir um mapa animado usando SVG e GSAP.js. O objetivo é criar uma interação atraente que seja descomplicada, leve e que não exija o uso de uma API de mapa de terceiros.
A configuração
Usaremos um elemento SVG para criar nosso estágio responsivo. Ele contém:
- uma imagem de mapa,
- um caminho,
- círculos marcando o início e o fim da rota,
- e dois grupos para movimento de “câmera”
GSAP desenha o caminho, move nosso ponto de vista e vincula nosso progresso na linha do tempo à posição de rolagem. Para isso, você precisará incluir os seguintes scripts:
- gsap.min.js
- ScrollTrigger.min.js
- DrawSVGPlugin.min.js
- MotionPathPlugin.min.js
Aqui está uma demonstração mínima com tudo isso trabalhando junto.
Vamos detalhar o HTML e CSS antes de percorrer o JS:
###PRE_c0963aefda619fa469b5e77503c19416### ###PRE_0b93f9461b2e945e1ccfb20deeb3d367###
Temos seções ao redor do elemento SVG apenas para nos fornecer alguma distância de rolagem vertical. Para tornar o SVG responsivo, usamos os atributos viewBox e preserveAspectRatio . O primeiro define as coordenadas x/y e a proporção largura/altura para desenhar os gráficos. Este último define o método de dimensionamento e corte. A largura e a altura reais são aplicadas no CSS e nosso SVG preencherá o espaço de acordo.
Para manter o código conciso, vários atributos de estilo são aplicados no nível do grupo e substituídos conforme necessário. Os dados do caminho foram criados desenhando sobre a imagem do mapa no Illustrator, mas você pode usar qualquer editor SVG ou até mesmo codificá-los manualmente no navegador.
Por último, temos elementos circulares, ‘.dot-start’ e ‘.dot-end’ para embelezar a aparência da nossa rota. O inicial tem posicionamento fixo de cx e cy, que corresponde aos valores x e y definidos no início do atributo d do nosso caminho. “.dot-end” será posicionado dinamicamente em nosso JS. Falando em…
###PRE_03cf60f2f0b11a7a25245d51cf1ebd43###
Criamos uma linha do tempo que acompanha o progresso da rolagem da seção que envolve nosso elemento SVG. Também fixamos o elemento SVG enquanto a linha do tempo avança. Existem duas interpolações simultâneas em nossa linha do tempo: uma desenhando o traçado de nosso caminho e outra movendo o círculo final ao longo desse caminho.
Observe que estamos forçando uma renderização imediata do círculo final e não aguardando o progresso da rolagem do usuário para iniciar a linha do tempo. Isso é necessário porque a posição x/y determinada dinamicamente desse círculo influenciará como centralizamos nosso ponto de vista. Primeiro, o grupo externo é empurrado para o centro do palco, onde também podemos definir a escala para aumentar/diminuir o zoom conforme desejado. Em seguida, o grupo interno é deslocado para a esquerda e para cima usando a posição x/y inversa do círculo final, movendo efetivamente tudo para o centro.
Movendo a “Câmera”
Agora que estabelecemos uma base sólida, vamos adicionar alguns movimentos de “câmera”. Para fazer isso, criaremos duas funções gsap.quickTo() . Eles irão interpolar a posição x/y do nosso grupo interno com base na localização do círculo final. É importante usar quickTo() em vez de gsap.to() porque quickTo() é otimizado para ser executado com frequência, e vamos chamá-los sempre que nossa linha do tempo for atualizada.
Vamos também adicionar outra camada de movimento preso à rolagem, interpolando a escala do nosso mapa. Em vez de defini-lo uma vez, adicionar uma interpolação .fromTo() à nossa linha do tempo nos permite definir os valores iniciais do grupo externo e interpolar a escala ao longo do progresso da nossa linha do tempo.
Aqui está o código atualizado:
###PRE_2aa5a249d0c9b6911ae1a3bac3bdb224###
E aqui está a demonstração aprimorada .
Indo além
Neste ponto, criamos uma configuração versátil que você pode modificar e estender facilmente. Para começar a explorar sua própria personalização, tente alterar a imagem do mapa e o caminho desenhado. Em vez de uma rota de mapa, ele poderia mostrar o fluxo de nutrientes em um diagrama de planta ou desenhar uma seta ondulada ao redor e através de suas fotos de viagem.
Você também pode adicionar itens à linha do tempo acionada por rolagem; aumentar e diminuir o zoom, brincar com a rotação, desenhar vários caminhos são apenas algumas ideias que vêm à mente. O importante é posicionar interpolações adicionais com intenção. As demonstrações acima têm interpolações simultâneas com durações correspondentes, mas, em última análise, você pode querer que algumas partes comecem mais cedo ou terminem mais tarde. Planejar e brincar com a linha do tempo é um processo iterativo, mas um bom efeito colateral de nossa configuração é a capacidade de avançar e retroceder o quanto quiser.
Abaixo estão algumas explorações adicionais para inspirar você a criar sua própria cena SVG de rolagem:
