Como reiniciar uma animação sempre que passar por um elemento com Divi e GSAP

Publicados: 2021-06-28

Quando se trata de animar elementos em sua página, você provavelmente desejará ativar a animação de um elemento assim que ele entrar na janela de visualização. Com as configurações de animação integradas do Divi, assim que esse elemento estiver visível e animado, ele permanecerá estático até que você recarregue a página inteira. Em alguns casos, você pode procurar uma abordagem mais consistente, em que sua animação reinicie com cada entrada da janela de visualização. Isso o ajudará a otimizar a experiência que os visitantes têm em seu site. Neste tutorial, mostraremos exatamente como fazer isso usando Divi, GSAP e ScrollTrigger for GSAP. Depois de obter a abordagem, você poderá aplicá-la a qualquer elemento de sua página. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

reiniciar animação

Móvel

reiniciar animação

Baixe o layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos
Download de graça

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

1. Criar Projeto de Seção

Adicionar seção de espaço reservado

Antes de começarmos a criar o design, adicionaremos duas seções de espaço reservado à página em que estamos trabalhando. Dessa forma, podemos ver a experiência de rolagem assim que o design for concluído. Alternativamente, você pode usar o design dentro de uma página que você já configurou. Adicione uma nova seção regular.

reiniciar animação

Dimensionamento

Modifique a altura da seção da seguinte maneira:

  • Altura: 100vh

reiniciar animação

Clone Placeholder Section

Em seguida, clone a seção uma vez.

reiniciar animação

Adicionar nova seção entre seções de espaço reservado

Para criar o design que você pôde ver na visualização deste post, adicionaremos uma nova seção regular entre as seções de espaço reservado.

reiniciar animação

reiniciar animação

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

reiniciar animação

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

  • Usar largura de calha personalizada: Sim
  • Largura da calha: 2
  • Largura: 90%
  • Largura máxima: 2.080 px

reiniciar animação

Adicionar Módulo de Texto # 1 à Coluna

Adicionar conteúdo

Em seguida, adicione um primeiro Módulo de Texto à coluna e inclua algum conteúdo de sua escolha.

reiniciar animação

Configurações de texto

Vá para a guia de design do módulo e altere as configurações de texto de acordo:

  • Fonte do texto: Montserrat
  • Peso da fonte do texto: pesado
  • Estilo da fonte do texto: maiúsculas
  • Cor do texto: # f9f9f9
  • Tamanho do texto:
    • Desktop: 150px
    • Tablet e telefone: 11vw
  • Altura da linha de texto: 1.1em
  • Alinhamento de Texto: Centro

reiniciar animação

Adicionar Módulo de Texto # 2 à Coluna

Adicionar conteúdo H2

Adicione outro Módulo de Texto abaixo do anterior e inclua algum conteúdo H2.

reiniciar animação

Configurações de texto H2

Defina o estilo do texto H2 da seguinte maneira:

  • Fonte do título 2: Montserrat
  • Alinhamento de Texto do Título 2: Centro
  • Tamanho do texto do título 2:
    • Desktop: 80px
    • Tablet e telefone: 10vw

reiniciar animação

Dimensionamento

Adicione uma largura de 100% também.

  • Largura: 100%

reiniciar animação

Posição

E reposicione todo o módulo na guia avançada.

  • Posição: Absoluta
  • Localização: Centro

reiniciar animação

Adicionar linha # 2

Estrutura da Coluna

Adicione outra linha abaixo da anterior, usando a seguinte estrutura de coluna:

reiniciar animação

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e ajuste as configurações de dimensionamento da seguinte forma:

  • Usar largura de calha personalizada: Sim
  • Largura da calha: 2
  • Largura: 90%
  • Largura máxima: 2.080 px

reiniciar animação

Configurações da coluna 1

Em seguida, abra as configurações da coluna 1.

reiniciar animação

Imagem de fundo

Faça upload de uma imagem de plano de fundo de sua escolha.

  • Tamanho da imagem de fundo: capa
  • Posição da imagem de fundo: centro

reiniciar animação

Espaçamento

Modifique as configurações de espaçamento da coluna a seguir.

  • Enchimento superior: 100px
  • Preenchimento inferior:
    • Desktop: 400px
    • Tablet e telefone: 200px
  • Preenchimento esquerdo: 5,5%
  • Preenchimento direito: 5,5%

reiniciar animação

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H4

Em seguida, adicione um Módulo de texto à coluna 1 com algum conteúdo H4.

reiniciar animação

Configurações de texto H4

Defina o estilo do texto H4 de acordo:

  • Fonte do título 4: Lato
  • Peso da fonte do cabeçalho 4: pesado
  • Estilo da fonte do título 4: maiúsculas
  • Título 4 Tamanho do texto: 13px
  • Cabeçalho 4 espaçamento entre letras: 2px

reiniciar animação

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo H3

Adicione outro Módulo de Texto abaixo do anterior, usando algum conteúdo H3.

reiniciar animação

Configurações de texto H3

Altere as configurações de texto H3 de acordo:

  • Fonte do título 3: Montserrat
  • Tamanho do texto do título 3: 36px
  • Cabeçalho 3 espaçamento entre letras: 1px
  • Altura da linha do título 3: 1,2em

reiniciar animação

Adicione o Módulo de Texto # 3 à Coluna 1

Adicionar conteúdo de descrição

Adicione o último Módulo de Texto contendo algum conteúdo descritivo de sua escolha.

reiniciar animação

Configurações de texto

Altere as configurações de texto do módulo da seguinte forma:

  • Fonte do texto: Lato
  • Cor do texto: # 4c4c4c
  • Espaçamento entre letras do texto: 0,5 px
  • Altura da linha de texto: 2em

reiniciar animação

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O último módulo de que precisamos nesta coluna é um Módulo de botão. Adicione alguma cópia de sua escolha.

reiniciar animação

Configurações de botão

Defina o estilo do botão na guia de design.

  • Usar estilos personalizados para botão: Sim
  • Tamanho do texto do botão: 14 px
  • Cor do texto do botão: #ffffff
  • Cor de fundo do botão: # 000000
  • Largura da borda do botão: 0 px

reiniciar animação

  • Fonte do botão: Lato
  • Peso da fonte do botão: negrito
  • Estilo da fonte do botão: maiúscula

reiniciar animação

Reutilizar coluna 1

Excluir coluna 2 e 3

Depois de concluir a coluna 1 e todos os módulos dentro dela, você pode excluir as duas colunas restantes da linha.

reiniciar animação

Clonar coluna 1 duas vezes

E reutilize a coluna 1 clonando-a duas vezes.

reiniciar animação

Alterar imagens de fundo de coluna duplicadas

Certifique-se de alterar a imagem de fundo de cada coluna duplicada.

reiniciar animação

Alterar conteúdo em colunas duplicadas

Junto com o conteúdo do módulo.

reiniciar animação

Adicionar configurações de conversão de transformação para coluna 2

Em seguida, abra as configurações da coluna 2 e vá para a guia de design. Uma vez lá, adicione alguns valores de conversão de transformação em diferentes tamanhos de tela para completar o design.

reiniciar animação

  • Deixou:
    • Desktop: 50px
    • Tablet e telefone: 0px

reiniciar animação

2. Aplicar técnica de reinicialização de animação ao design

Adicionar classe CSS à linha 2

Agora que nosso design está pronto, podemos nos concentrar na técnica de reinicialização de animação. Vamos direcionar vários módulos de uma vez para isso. Primeiro, abra as configurações da segunda linha e aplique a seguinte classe CSS:

  • Classe CSS: trigger-animation-row

reiniciar animação

Adicionar Módulo de Código à Linha # 1

A classe CSS que adicionamos na etapa anterior deste tutorial nos ajudará a direcionar todos os módulos dentro desta linha de uma vez. Para criar a animação de reinicialização, estamos usando algum código JQuery, a biblioteca GSAP JavaScript e a biblioteca ScrollTrigger para GSAP. Para adicionar este código, inseriremos um novo Módulo de Código abaixo do segundo Módulo de Texto na linha # 1.

reiniciar animação

Adicionar bibliotecas GSAP e ScrollTrigger

Certifique-se de adicionar as bibliotecas GSAP e ScrollTrigger dentro de novas tags de script.

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

reiniciar animação

Adicionar novas tags de script

Em seguida, adicione novas tags de script abaixo das tags de script da biblioteca.

reiniciar animação

Adicionar função GSAP + ScrollTrigger

Dentro das novas tags de script, vamos copiar e colar as seguintes linhas de código JQuery: 

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Este código terá como alvo todos os módulos de linha de uma vez e reiniciará a animação assim que um visitante entrar na janela de visualização novamente. A animação, neste caso, é bastante direta e mínima. No entanto, com GSAP e ScrollTrigger, você pode criar qualquer tipo de animação que quiser, então definitivamente vale a pena dar uma olhada!

reiniciar animação

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

reiniciar animação

Móvel

reiniciar animação

Pensamentos finais

Nesta postagem, mostramos como reiniciar uma animação assim que o elemento entrar na janela de visualização. Essa abordagem ajuda a criar uma experiência consistente, não importa como os visitantes rolarem. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.