Estudos de caso de animações com rolagem

Swetha Gopalakrishnan

Saurabh Rajpal

As animações de rolagem são um padrão comum de UX na Web. Uma animação acionada por rolagem é vinculada à posição de rolagem de um contêiner de rolagem. Isso significa que, conforme você rola para cima ou para baixo, a animação vinculada vai para frente ou para trás em resposta direta. Exemplos disso são efeitos como imagens de fundo com efeito paralaxe ou indicadores de leitura que se movem conforme você rola a tela.

Normalmente, os desenvolvedores criam animações controladas por rolagem usando JavaScript para responder a eventos de rolagem na linha de execução principal. Isso dificulta a criação de animações de rolagem eficientes que estejam sincronizadas com a rolagem, já que os eventos de rolagem são entregues de forma assíncrona e geralmente causam instabilidade por estarem na linha de execução principal.

No entanto, como parte dos novos recursos de CSS e UI que estão chegando aos navegadores, agora é possível criar animações declarativas de rolagem. Com as linhas do tempo de rolagem e de visualização, novos conceitos que se integram à API Web Animations (WAAPI) e à API CSS Animations, agora é possível ter animações suaves acionadas por rolagem executadas fora da linha de execução principal com apenas algumas linhas de código. Neste estudo de caso, descubra como a Tokopedia, a redBus e a Policybazaar já estão aproveitando esse novo recurso.

Tokopedia

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

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

Código

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

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

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

Casos de uso

Galeria de fotos com Revelação de imagem (para dispositivos móveis) e Cover Flow (para computadores).

Código (dispositivos móveis)

No exemplo anterior, a Tokopedia usou a linha do tempo anônima de progresso de rolagem. No código a seguir, a redBus usa a linha do tempo do progresso de visualização nomeada. A animação muda o opacity e o clip-path do elemento <img> no animation-range definido dentro do botão de rolagem ancestral mais próximo do elemento, 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 com esse recurso, já que ele é uma combinação perfeita de performance com uma experiência melhor, impulsionando nossos indicadores de experiência na página para SEO. Além disso, a curva de aprendizado mínima faz dele um recurso indispensável para todos os sites de e-commerce. Também recebemos feedback positivo e apoio de outras equipes para aproveitar o SDA em mais jornadas do usuário.— Amit Kumar, gerente sênior de engenharia, redBus.

Policybazaar

Comparar planos de seguro é uma ação principal repetida pelos usuários para orientar o processo de tomada de decisão. Usando animações controladas por rolagem, a Policybazaar diminuiu o tamanho dos elementos de baixa prioridade em resposta à rolagem da tabela pelo usuário. Isso resultou em uma experiência de rolagem suave e melhorou a legibilidade.

Com as animações baseadas em rolagem, maximizamos o espaço da janela de visualização para que o usuário compare planos, garantindo uma experiência de leitura focada e sem distrações.—Rishabh Mehrotra, chefe de design da BU de seguros de vida, PolicyBazaar.

Código

Semelhante ao exemplo anterior da Tokopedia, a Policybazaar usa a função scroll() para definir uma linha do tempo anônima de progresso de rolagem para controlar o progresso da animação CSS. Nesse caso, diminuindo o tamanho da fonte e esmaecendo o cabeçalho com base na posição de rolagem dentro do animation-range definido.

@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 baseadas em rolagem como um padrão comum na jornada do usuário

Todas as empresas de e-commerce em destaque usaram animações baseadas em rolagem em páginas com cards, animando-os para chamar a atenção do usuário . Os exemplos a seguir mostram efeitos de rolagem em cards em diferentes partes da jornada do usuário. Isso geralmente é feito usando uma linha do tempo anônima de progresso da visualização 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)

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

Tokopedia (página de detalhes do produto)

Considerações ao usar a API Scroll-driven Animations

É possível fazer polyfill de animações baseadas em rolagem para navegadores sem suporte, por exemplo, com o polyfill de linha do tempo de rolagem. Se você fizer isso, será necessário realizar mais testes para garantir que ele funcione bem com seu framework e que os navegadores que usam o polyfill não tenham falhas de animação ou experiências instáveis.

No CSS, use @supports para testar a compatibilidade com animation-timeline antes de usar animações de rolagem. Exemplo:

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

}

Recursos

• Demonstrações de animações controladas por rolagem
• Animar elementos na rolagem com animações de rolagem
• Codelab: Introdução às animações de rolagem no CSS
• Extensão do Chrome: depurador de animação controlada por rolagem
• Polyfill de linha do tempo de rolagem
• Quer informar um bug ou um novo recurso? Queremos saber sua opinião!

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

• Por que os recursos da interface da Web são importantes para seu site de e-commerce?
• Estudos de caso de transições de visualização
• Estudos de caso da API Popover
• Estudos de caso de consultas de contêiner
• Estudos de caso do seletor:has()