Resumo

  • A primeira versão pública de Scroll-linked Animations, publicada pelo W3C em outubro de 2022, distinguiu o progresso de um contêiner rolável do progresso de um elemento ao atravessar a área visível.
  • Os textos de 2023, já chamados Scroll-driven Animations, detalharam ScrollTimeline, ViewTimeline e animation-timeline: a posição do leitor passa a marcar o compasso da sequência visual.

Um gráfico entra em cena num artigo comprido. As barras crescem uma após a outra durante dois segundos, tempo suficiente para o editor achar o efeito elegante e insuficiente para o leitor comparar números. Ele sobe a página para olhar outra vez. As barras permanecem imóveis no último quadro. A página permite voltar, mas o relógio da animação não recebeu a notícia. É uma coreografia feita para um leitor imaginário que nunca hesita, nunca confere, nunca relê.

O primeiro rascunho público do W3C, de 25 de outubro de 2022, chamou a proposta de Scroll-linked Animations. O documento separou duas medidas. O progresso de rolagem acompanha a posição de um contêiner entre o início e o fim de seu percurso. O progresso de visualização acompanha um elemento específico enquanto entra, atravessa e sai da janela visível. A linha de progresso no alto de uma reportagem precisa da primeira medida; uma figura no meio do texto pode precisar da segunda. Perguntar “quanto da página passou?” é diferente de perguntar “onde está esta figura?”.

Essa distinção muda o dono do tempo. O navegador mede a posição ou a visibilidade e fornece uma linha temporal ligada a esse percurso. O site escolhe o que se mexe, quando começa e termina, e que ideia cada etapa deve comunicar. Parar de rolar pode parar o efeito. Subir pode fazê-lo retroceder. A barra de rolagem recebe a batuta, mas a partitura continua sendo responsabilidade da redação.

O rascunho de 8 de dezembro de 2022 desenvolveu os meios de ligação em CSS. scroll() pode apontar para o progresso de rolagem; linhas temporais nomeadas e as ligadas à visualização dão a uma animação a fonte adequada. Há também uma condição menos fotogênica: sem conteúdo que transborde e possa rolar, uma linha temporal de rolagem pode ficar inativa. Não existe “metade da viagem” para um elevador que nunca sai do térreo.

Em 28 de abril de 2023, o trabalho apareceu com o título Scroll-driven Animations. O nome descreve melhor o mecanismo: o deslocamento ou a visibilidade dirigem o progresso, em vez de apenas disparar um efeito cronometrado. A ideia pode ser expressa com CSS ou com interfaces de Web Animations. O efeito ocupa um intervalo de percurso, e não obrigatoriamente uma duração em segundos. Uma ilustração pode revelar suas camadas ao cruzar a área visível; uma barra pode avançar ao longo da leitura.

O texto de 6 de junho de 2023 descreveu ScrollTimeline e ViewTimeline como fontes diferentes de progresso, conectadas à animação por animation-timeline. A escolha errada produz um pequeno absurdo editorial: a barra que deveria indicar a jornada inteira segue a entrada de uma imagem, enquanto a imagem tenta acompanhar a página inteira. Antes de medir o progresso, é preciso decidir de quem é a viagem.

O histórico de publicação do W3C reúne a primeira versão pública de 2022 e as revisões de 2023. Nelas, o navegador ganhou uma forma comum de medir o percurso. O juízo sobre o valor da cena continua humano. Uma explicação que acompanha a releitura dá ao leitor poder real; vinte títulos saltitando a cada gesto transformam o artigo num parque de diversões sem saída. O relógio foi despedido por uma boa razão. Seria pena substituí-lo por um diretor ainda mais barulhento.

Quando o leitor volta ao gráfico, a demonstração pode voltar junto. É assim que um palco montado numa página respeita quem escolhe o caminho pela plateia.