Estudos de caso de animações com rolagem

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

As animações de rolagem são um padrão de UX comum na Web. Uma animação de 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 avança ou volta em resposta direta. Exemplos disso são efeitos como imagens de fundo em paralaxe ou indicadores de leitura que se movem conforme você rola a tela.

Os desenvolvedores geralmente criam animações movidas 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, devido aos eventos de rolagem serem enviados de forma assíncrona e, muitas vezes, causam instabilidade devido a estarem na linha de execução principal.

No entanto, como parte dos novos recursos de CSS e interface do usuário nos navegadores, agora é possível criar animações declarativas de rolagem. Com as linhas de 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 com rolagem na 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.

Compatibilidade com navegadores

  • Chrome: 115.
  • Edge: 115.
  • Firefox: atrás de uma flag.
  • Safari: não é compatível.

Origem

Tokopedia

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

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

A animação muda a visibilidade da barra fixa superior com base na posição de rolagem do usuário.

Código

A implementação a seguir usa a função scroll() para definir uma linha do tempo de progresso de rolagem anônima para controlar o progresso da animação CSS. A visibilidade da barra fixa superior muda de acordo com a posição de rolagem dentro do 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

A redBus tem animações diferentes para dispositivos móveis e computadores na página de destino coisas a fazer, que aparece no início do funil de conversão para todos os usuários. Com animações movidas por rolagem, foi possível substituir essas implementações personalizadas do JavaScript por CSS para conseguir o mesmo efeito.

Casos de uso

Galeria de fotos com Revelar imagem (para celular) e Fluxo de capas (para computador).

Efeito de revelação de imagem de animação orientada por rolagem para carregar imagens na galeria de fotos "Coisas para fazer" do redBus.

Código (dispositivos móveis)

No exemplo anterior, a Tokopedia usou a linha do tempo de progresso de rolagem anônima. No código abaixo, a redBus usa a linha do tempo de progresso de visualização nomeada. A animação muda o opacity e o clip-path do elemento <img> dentro do animation-range definido dentro do elemento mais próximo do botão de rolagem, 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, porque ele é uma combinação perfeita de desempenho com uma experiência melhor, aumentando nossos indicadores de experiência na página para SEO. Além disso, a curva de aprendizado mínima faz com que ele seja essencial 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 importante repetida pelos usuários para orientar o processo de tomada de decisão. Usando animações movidas por rolagem, a Policybazaar reduziu 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 animações movidas por rolagem, conseguimos maximizar o espaço da janela de visualização para que o usuário compare planos, garantindo uma experiência de leitura focada e sem bagunça.—Rishabh Mehrotra, chefe de design da BU de seguros de vida da PolicyBazaar.

Animação gerada por rolagem animate-timeline na tabela de comparação de planos em LOB de investimento e vida (linha de negócios).

Código

Semelhante ao exemplo anterior da Tokopedia, a Policybazaar usa a função scroll() para definir uma linha do tempo de progresso de rolagem anônima para controlar o progresso da animação CSS. Nesse caso, o tamanho da fonte é reduzido e o cabeçalho é desativado 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 com rolagem como um padrão comum na jornada do usuário

Todas as empresas de e-commerce em destaque usaram animações com base no rolagem em páginas com cards, animando cards 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 de progresso de visualização anônima para controlar o progresso da animação CSS personalizada, conforme mostrado no snippet de CSS abaixo.

@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 animação com rolagem para carregar cards de produtos na página de destino "Coisas para fazer" da redBus.

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

Animação com rolagem para mostrar e ocultar cards de produtos nas linhas de negócios "Investimento" e "Vida".

Tokopedia (página de detalhes do produto)

Animação de exibição gradual e esmaecimento ao rolar pelos produtos listados.

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

É possível usar o polyfill para animações de rolagem em navegadores que não oferecem suporte, por exemplo, com o polyfill de linha do tempo de rolagem. Se você fizer isso, será necessário fazer outros 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, é possível usar @supports para testar o suporte à 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 falam sobre como as empresas de e-commerce se beneficiaram do uso de novos recursos de CSS e interface, como transições de visualização, pop-up, consultas de contêiner e o seletor has().