Esta página foi traduzida pela API Cloud Translation.

Estudos de caso de animações com rolagem

Swetha Gopalakrishnan

Saurabh Rajpal

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 de alta performance sincronizadas com a rolagem, já que os eventos de rolagem são entregues de forma assíncrona e geralmente causam instabilidade por estar 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 se beneficiando desse novo recurso.

Compatibilidade com navegadores

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

Animação da visibilidade mudando 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

O redBus tem animações diferentes para dispositivos móveis e computadores na página de destino de coisas para fazer, que é exibida 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 Revelação de imagem (para dispositivos móveis) e Fluxo de capa (para computadores).

Efeito de revelação de imagem de animação de rolagem para carregar imagens na galeria de fotos "Coisas legais 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 botão de rolagem 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, 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 suporte de outras equipes para usar o SDA em mais jornadas de usuário: Amit Kumar, gerente de engenharia sênior, 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 de rolagem, o Policybazaar reduziu o tamanho dos elementos de baixa prioridade em resposta ao usuário rolando a tabela. Isso resultou em uma experiência de rolagem suave e melhorou a legibilidade.

Com animações de rolagem, conseguimos maximizar o espaço da janela de visualização para o usuário comparar os planos, garantindo uma experiência de leitura focada e desordenada. – Rishabh Mehrotra, diretora de design da unidade de seguro de vida, PolicyBazaar.

Animação de rolagem animate-timeline na tabela de comparação de planos de investimento e linhas de negócios de vida.

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 de 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 aplicar o polyfill a animações de rolagem para navegadores sem suporte, por exemplo, com o polyfill da 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, 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

Demonstrações de animações com 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 movida por rolagem
Polyfill da linha do tempo de rolagem
Você quer informar sobre um bug ou um novo recurso? Queremos saber sua opinião.

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