As animações de rolagem são um padrão comum de UX na Web. Uma animação de rolagem está 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 plano de fundo de paralaxe ou indicadores de leitura que se movem conforme você rola a tela.
Os desenvolvedores normalmente criam animações de rolagem usando JavaScript para responder a eventos de rolagem na linha de execução principal. Isso dificulta a criação de animações de desempenho orientadas por rolagem que estão sincronizadas com a rolagem, já que os eventos de rolagem são enviados de maneira assíncrona e geralmente causam instabilidade devido à linha de execução principal.
No entanto, como parte dos novos recursos de CSS e interface que chegam nos navegadores, agora é possível criar animações declarativas de rolagem. Com as linhas do tempo de rolagem e as linhas do tempo de visualização, novos conceitos que se integram à API Web Animations (WAAPI) e à API CSS Animations, agora você pode ter animações de rolagem suaves executadas na linha de execução principal com apenas algumas linhas de código. Neste estudo de caso, descubra como a Tokopedia, a redBus e o Policybazaar já estão se beneficiando desse novo recurso.
Tokopedia
A Tokopedia substituiu as implementações de JavaScript personalizadas anteriores por animações de rolagem para otimizar o desempenho da página e aprimorar a experiência geral de navegação em todo o funil de conversão de e-commerce.
Conseguimos reduzir até 80% das nossas linhas de código em comparação com eventos de rolagem convencionais do JavaScript. Além disso, observamos que o uso médio da CPU foi reduzido de 50% para 2% durante a rolagem— Andy Wihalim, engenheiro de software sênior, Tokopedia
Programar
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 andamento da animação CSS. A
visibilidade da barra fixa superior muda com base na 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 diferentes animações para dispositivos móveis e computadores na página de destino Coisas legais para fazer, mostrada no início do funil de conversão para todos os usuários. Com as animações de rolagem, foi possível substituir essas implementações personalizadas de JavaScript por CSS para ter o mesmo efeito.
Casos de uso
Galeria de fotos com revelação da imagem (para dispositivos móveis) e fluxo de capa (para computador).
Código (dispositivos móveis)
No exemplo anterior, a Tokopedia usou a linha do tempo de progresso da
rolagem anônima. No código a seguir, o redBus usa a linha do tempo de progresso da
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 ancestral
mais próximo do elemento, que é o botão de rolagem da galeria de fotos nesse 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%;
}
`;
Ficamos muito felizes em ver esse recurso, já que ele é uma combinação perfeita de desempenho com experiência aprimorada, impulsionando nossos indicadores de experiência na página para SEO. Além disso, como a curva de aprendizado mínima é essencial para todo site de e-commerce, Também recebemos feedback positivo e suporte de outras equipes para aproveitar o SDA e oferecer mais jornadas de usuário.— Amit Kumar, gerente de engenharia sênior, redBus.
Bazar de Políticas
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, foi possível maximizar o espaço da janela de visualização para o usuário comparar planos, garantindo uma experiência de leitura focada e descomplicada.—Rishabh Mehrotra, diretor de design da Unidade de Seguros de Vida, PolicyBazaar.
animate-timeline na tabela de comparação de planos no investimento e na vida útil
LOB (linha de negócios).Programar
Assim como no exemplo anterior da Tokopedia, o Policybazaar usa a
função scroll() para definir uma linha do tempo de progresso de rolagem anônima (link em inglês) para
controlar o andamento da animação CSS. Nesse caso, a redução do tamanho
da fonte e o esmaecimento do 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 de rolagem como um padrão comum na jornada do usuário
Todas as empresas de e-commerce em destaque usaram animações de rolagem em páginas com cards e cards para chamar a atenção do usuário . Os exemplos abaixo mostram efeitos de rolagem nos 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 andamento da animação CSS personalizada, conforme 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)
O que considerar ao usar a API Scroll-driven Animations
É possível usar o polyfill de animações de rolagem em navegadores sem suporte, por exemplo, com o polyfill da linha do tempo de rolagem. Se você fizer isso, serão necessários outros testes para garantir que ele funcione bem com seu framework e que os navegadores que usam o polyfill não apresentem falhas de animação ou experiências instáveis.
No CSS, você pode usar @supports para testar a compatibilidade com a linha do tempo da animação
antes de usar animações de rolagem. Exemplo:
@supports (animation-timeline: scroll()) {
}
Recursos
- Demonstrações de animações de rolagem
- Animar elementos na rolagem com animações de rolagem
- Codelab: Primeiras etapas com animações de rolagem no CSS
- Extensão do Chrome: Depurador de animação de rolagem
- Polyfill da linha do tempo de rolagem
- Quer informar um bug ou novo recurso? Queremos saber sua opinião.
Explore os outros artigos desta série, que falam sobre como as empresas de e-commerce se beneficiaram do uso dos novos recursos de CSS e interface, como transições de visualização, popover, consultas de contêiner e o seletor has().