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 estão 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 que estão chegando aos 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 de rolagem, eles substituíram essas implementações personalizadas do JavaScript pelo 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 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 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 distrações.—Rishabh Mehrotra, chefe de design da Life Insurance BU, PolicyBazaar.
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 em toda a jornada do usuário
Todas as empresas de e-commerce em destaque usaram animações movidas por rolagem nas 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 fragmento 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 polifill 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 movida por rolagem
- Scroll-timeline Polyfill
- 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().