Acionado por rolagem, acionado por rolagem, estados de rolagem e transições de visualização

Eu disse uma coisa e quis dizer outra, e usei uma quando precisei de outra. Tenha paciência comigo enquanto observo as semelhanças e diferenças de alto nível entre animações acionadas por rolagem , animações acionadas por rolagem , estados de rolagem de consulta de contêiner e visualizar transições para meu futuro eu.

Animações baseadas em rolagem

Uma animação dirigida por rolagem é uma animação que responde, sim, à rolagem. Especificamente, há uma ligação direta entre o progresso da rolagem e o progresso da animação. Role para frente, a animação avança. Role para trás, a animação é executada ao contrário. Pare de rolar, as animações param.

.element {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

Animações acionadas por rolagem

Uma animação de rolagem – acionada  é executada na rolagem e é executada por completo. Em outras palavras, não há link direto com o progresso da rolagem aqui. Quando um elemento ultrapassa algum limite definido – chamado de intervalo de ativação do gatilho – a animação é executada, executada, executada. Por exemplo, quando esse elemento entra e sai do scrollport.

Estado de rolagem da consulta do contêiner

Este está no rascunho de trabalho da especificação do módulo de regras condicionais CSS nível 5. Veja como a especificação o define:

[…] permite consultar um contêiner sobre o estado que depende da posição de rolagem.

É por isso que meu cérebro dói tanto. É mais ou menos como uma animação acionada por rolagem, mais ou menos como uma animação acionada por rolagem, mas atualiza os estilos quando um contêiner atinge algum tipo de condição de rolagem, digamos:

.sticky-nav {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  @container scroll-state(stuck: top) {
    background: orangered;
    border-radius: 0;
    flex-direction: row;
    width: 100%;

    a {
      text-decoration: none;
    }
  }
}

Ver transição

Isso não tem nada a ver com rolagem! E não tem nada a ver com view(). Na verdade, estamos falando de uma API completa com recursos interligados de CSS e JavaScript que podem fazer duas coisas:

Transições no mesmo documento

Um elemento muda de um estado para outro em resposta a uma interação do usuário. Fiquei realmente impressionado com este do Modern Web Weekly que anima os estados de verificação do botão de opção onde o estado se move de uma entrada para outra.

Basicamente, o estado muda na mesma página em que foi iniciado. Bramus é o rei de todas as transições de visualização com uma grande quantidade de belos exemplos nesta coleção da equipe do Chrome.

Transições entre documentos

Animando de uma página para outra. O uso padrão é um crossfade da página A para a página B (e vice-versa) e é realmente fácil de implementar . Pode ficar muito mais complexo a partir daí, é claro. Sunkanmi compartilhou recentemente várias receitas , como esta bacana que apaga a primeira página com uma circular clip-path revelando a segunda página.

Isso é tudo!

Isso me ajuda a explicar as coisas assim.

Acionado por rolagem, acionado por rolagem, estados de rolagem e transições de visualização originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.