Estudos de caso de animações com rolagem

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Animações de rolagem são um padrão comum de UX na Web. Um anúncio com base em rolagem a animação está vinculada à posição de rolagem de um contêiner de rolagem. Isso significa que que, à medida que você rola para cima ou para baixo, a animação vinculada vai puxar para frente ou para trás. em resposta direta. Exemplos disso são efeitos como fundo paralaxe imagens ou indicadores de leitura que se movem conforme você rola.

Os desenvolvedores normalmente criam animações de rolagem usando JavaScript. para responder a eventos de rolagem na linha de execução principal. Isso dificulta a criação animações de rolagem com alto desempenho que estão em sincronia com a rolagem, devido à eventos de rolagem entregues de forma assíncrona e, muitas vezes, causam instabilidade devido a na linha de execução principal.

No entanto, como parte do novo Recursos de interface e CSS em navegadores, agora é possível criar animações declarativas de rolagem. Com linhas do tempo de rolagem e visualização Linhas do tempo, novos conceitos que se integram à atualidade API Web Animations (WAAPI) e API CSS Animations, agora você pode ficar macia animações de rolagem executadas fora da linha de execução principal, com apenas algumas linhas de o código-fonte. Neste estudo de caso, descubra como a Tokopedia, a redBus e a Policybazaar estão que já estão aproveitando esse novo recurso.

Compatibilidade com navegadores

  • Chrome: 115
  • Borda: 115.
  • Firefox: atrás de uma sinalização.
  • Safari: incompatível.

Origem

Tokopedia

A Tokopedia substituiu as implementações JavaScript personalizadas anteriores por Animações de rolagem para otimizar o desempenho da página e melhorar experiência geral de navegação em todo o funil de conversão de e-commerce.

Conseguimos reduzir até 80% das linhas de código em comparação com o eventos de rolagem JavaScript convencionais e observou que o uso médio da CPU reduzido de 50% para 2% durante a rolagem— Andy Wihalim, Engenheiro de software sênior, Tokopedia

.
Animação de mudança de visibilidade da barra fixa superior com base na rolagem do usuário média.

Código

A implementação a seguir usa a função scroll() para definir uma rolagem anônima cronograma de progresso para controlar o andamento da animação CSS. A a visibilidade da barra fixa superior muda com base na posição de rolagem dentro do definido o animationRange.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

A redBus tem animações diferentes para dispositivos móveis e computadores coisas para fazer, que é mostrada no início do funil de conversão para todos os usuários. Com animações de rolagem, eles foram capazes de substituir essas implementações JavaScript personalizadas por CSS para alcançar o mesmo efeito.

Casos de uso

Galeria de fotos com Revelação de imagem (para mobile) e Cover Flow (para computador).

Efeito de revelação de imagem de animação de rolagem para carregamento de imagens no "Coisas legais para fazer" do redBus galeria de fotos.

Código (dispositivos móveis)

No exemplo anterior, a Tokopedia usou o progresso de rolagem anônima Linha do tempo. No código abaixo, o redBus usa o progresso de visualização nomeado Linha do tempo. A animação muda a opacity e a clip-path da <img>. dentro do animation-range definido dentro do elemento o botão de rolagem ancestral, que é o botão de rolagem da galeria de fotos neste caso.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

Estamos muito felizes em ver esse recurso, porque é uma combinação perfeita de desempenho com uma experiência melhor, impulsionando nossos sinais de experiência na página para SEO. Em cima de que a curva de aprendizado mínima o torna indispensável para todos site. Também recebemos feedback positivo e apoio de outras equipes para aproveitar SDA para mais jornadas do usuário.— Amit Kumar, Engenharia Sênior Gerente da redBus.

Politicas

Comparar planos de seguro é uma ação importante repetida pelos usuários para orientar processo de tomada de decisão. Usando animações de rolagem, o Policybazaar reduziu a tamanho dos elementos de baixa prioridade em resposta ao usuário rolar a tabela. Isso resultou em uma experiência de rolagem graciosa, melhorando a legibilidade.

Com animações de rolagem, conseguimos maximizar o espaço da janela de visualização para o usuário compare planos, garantindo uma leitura focada e desordenada experiência.—Rishabh Mehrotra, chefe Design para a unidade de seguros de vida, PolicyBazaar.

.
Animação de rolagem animate-timeline na tabela de comparação de planos em "Investimento" e "Vida" Linha de negócios (LOB).

Código

Assim como no exemplo anterior da Tokopedia, o Policybazaar usa a Função scroll() para definir uma linha do tempo de progresso de rolagem anônima para controlando o progresso da animação CSS. Nesse caso, reduzir a fonte e o esmaecimento do cabeçalho com base na posição de rolagem dentro do tamanho animation-range:

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

Animações de rolagem como um padrão comum na jornada do usuário

Todas as empresas de e-commerce em destaque usaram animações de rolagem nas páginas com cartões, com animações para chamar a atenção do usuário . A os exemplos a seguir mostram efeitos de rolagem em cards de diferentes partes do usuário jornada. Geralmente, isso é feito usando uma linha do tempo de progresso de visualização anônima. para controlar o progresso da animação CSS personalizada, como mostrado no snippet de CSS a seguir.

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (página inicial)

Efeito de voo flutuante da animação de rolagem para carregar cards de produtos no "Things To Do" do redBus página de destino.

Policybazaar (página de informações do produto)

Aparecimento gradual e esmaecimento das animações com base na rolagem dos cards de produtos em "Investment" e "Life LOB" (linha de negócios).

Tokopedia (página de detalhes do produto)

Animação de aparecimento/desaparecimento gradual ao navegar pelos produtos listados.

Considerações ao usar a API de animações de rolagem

É possível aplicar polyfill a animações de rolagem para navegadores incompatíveis, por exemplo, com o polyfill da linha do tempo de rolagem. Se você fizer isso, requerem mais testes para garantir que ele funcione bem com suas e que os navegadores que usam o polyfill não tenham animação ou experiências instáveis.

No CSS, você pode usar @supports para testar a compatibilidade com a linha do tempo de animação. antes de usar animações de rolagem. Exemplo:

@supports (animation-timeline: scroll()) {

}

Recursos

Confira os outros artigos desta série que explicam como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e interface, como transições de visualizações, Popover, consultas de contêiner e o seletor has().