Animações com scroll e atributos HTML

Distância do pin

A animação é a mesma. Escolha quanto scroll será necessário para concluí-la.

<section data-sw="pin" data-sw-end="300%" data-sw-scrub>

PIN ATIVO Continue rolando · 0%

A seção permanece. O progresso avança.

Leitura do exemplo 01

Deslocamento horizontal

O pin segura a seção e o filho percorre o eixo X. É a forma mais simples de enxergar a relação entre scroll e progresso.

HTMLpin + move

<section
  data-sw="pin"
  data-sw-end="300%"
  data-sw-scrub
>
  <div
    data-sw="move"
    data-sw-x="70vw"
  >SW</div>
</section>

Variação 02

O mesmo pin.
Outra narrativa.

Agora duas frases atravessam a tela em direções opostas. O mecanismo continua sendo uma timeline presa ao scroll.

MOVIMENTO

COM INTENÇÃO

Duas direções.
Um único progresso.

Leitura do exemplo 02

Direções opostas

Dois filhos participam da mesma timeline. Um recebe X negativo e o outro X positivo.

HTMLdois participantes

<section
  data-sw="pin"
  data-sw-end="220%"
  data-sw-scrub
>
  <p data-sw="move" data-sw-x="-34vw">
    MOVIMENTO
  </p>
  <p data-sw="move" data-sw-x="34vw">
    COM INTENÇÃO
  </p>
</section>

Variação 03

Movimento também pode revelar profundidade.

Deslocamento vertical, escala e rotação trabalham juntos para apresentar um objeto como se fosse uma seção de produto.

Objeto em destaque

Uma peça.
Três propriedades.

y · scale · rot

Leitura do exemplo 03

Objeto com profundidade

O mesmo elemento combina três propriedades. A sensação de produto vem principalmente do CSS; os atributos controlam sua transformação.

HTMLy + scale + rot

<section
  data-sw="pin"
  data-sw-end="280%"
  data-sw-scrub
>
  <div
    data-sw="move"
    data-sw-y="-28vh"
    data-sw-scale="1.45"
    data-sw-rot="18"
  >Produto</div>
</section>

Variação 04

Camadas criam sensação de câmera.

Três planos percorrem distâncias diferentes. Não existe 3D real aqui: a diferença de velocidade produz a profundidade.

FUNDO

MEIO

FRENTE

Velocidades diferentes
simulam profundidade.

Leitura do exemplo 04

Profundidade por camadas

Cada plano percorre uma distância diferente. A frente se move mais, o fundo se move menos e o cérebro interpreta isso como profundidade.

HTMLtrês velocidades

<section
  data-sw="pin"
  data-sw-end="320%"
  data-sw-scrub
>
  <div data-sw="move" data-sw-x="22vw"
       data-sw-opacity="0.55">FUNDO</div>

  <div data-sw="move" data-sw-x="38vw">
    MEIO
  </div>

  <div data-sw="move" data-sw-x="58vw"
       data-sw-scale="1.25">FRENTE</div>
</section>

Uma base, quatro resultados

Não criamos quatro motores.
Criamos quatro composições.

É assim que o Smooll v2 crescerá: poucos atributos compreensíveis, combinados para produzir experiências diferentes.