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 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.

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

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).

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.

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)

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 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

• 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 acionado por rolagem
• Polyfill da rolagem da linha do tempo
• 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 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().

• Por que os recursos da interface da Web são importantes para seu site de e-commerce?
• Confira os estudos de caso da Transitions
• Estudos de caso da API Popover
• Estudos de caso de consultas de contêineres
• Estudos de caso do seletor:has()