Por que essa API Ć© tĆ£o importante?
Ela resolve por inteiro os principais problemas atuais com animaƧƵes vinculadas a scroll:
- AnimaƧƵes rodando na thread principal
- Navegadores modernos realizam a rolagem em um processo separado e, portanto, entregam eventos de rolagem de forma assĆncrona.
Esses problemas sĆ£o muito relevantes, pois a maioria, senĆ£o todas, as bibliotecas de animaĆ§Ć£o com rolagem dependem de pelo menos um dos pontos apresentados. AlĆ©m de explicar o problema, acho importante entender o impacto que esses problemas causam no usuĆ”rio final, e a palavra-chave Ć© PERFORMANCE. Os desenvolvedores web estĆ£o cada vez mais empenhados em melhorar o desempenho de suas aplicaƧƵes, e nĆ£o poder realizar animaƧƵes comuns em aplicativos nativos (iOS / Android) sem consumir uma grande quantidade de poder computacional Ć© problemĆ”tico.
Exemplo de uma implementaĆ§Ć£o com JS :
https://codepen.io/nyb1030/full/gOBvZgR
Ć bem perceptĆvel o quĆ£o rapidamente isso pode se tornar um problema de UX (experiĆŖncia do usuĆ”rio) para a sua aplicaĆ§Ć£o.
Como foi feita essa API?
Essa API foi desenvolvida utilizando como base duas APIs jĆ” existentes, que sĆ£o a Web Animations API (WAAPI) e a API de AnimaƧƵes CSS (CSS Animations API), permitindo assim animaƧƵes acionadas por rolagem de forma declarativa.
Isso torna possĆvel as melhorias mencionadas anteriormente.
Como posso utilizar essa API?
Com esse Exemplo de animaĆ§Ć£o simples e rapida, sĆ£o necessarios somente esse html:
<body>
<div id="progress"></div>
ā¦
</body>
E esse CSS:
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 1em;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
Tendo como novidade a propriedade animation-timeline: scroll();
Propriedades:
Defina a linha do tempo que controlarĆ” o progresso de uma animaĆ§Ć£o e defina o intervalo de anexaĆ§Ć£o ao longo dessa linha do tempo:
Define timelines de progresso de rolagem com nomes:
Define timelines de progresso de visualizaĆ§Ć£o com nomes:
Modificar o escopo da linha do tempo:
Exemplos
- Visualizar questĆ£o de % dentro da tela ( como intersection observer faz );
- AnimaĆ§Ć£o de album de musicas (scroll lateral / galeria);
- Dentro de uma galeria de fotos;
- Lista de contatos;
- Cards se sobrepondo;
- Imagens se revelando ao entrar na tela;
Importante ressaltar que esses sĆ£o alguns links que eu acho que mostram grande parte do poder dessa API.
https://scroll-driven-animations.style/
Nesse link acima existem outras dezenas de implementaƧƵes.
Se quiser faƧa a sua e me mande o link pelo Instagram @luccaparadeda.
Referencias: