SWCore / Animações

Animações

Recursos de movimento, narrativa, scroll e interação aplicados pela própria biblioteca nesta página.

Animação

45 - Reveal Revela um elemento (fade, slide, zoom, flip ou clip-path) na primeira vez que ele entra na área visível ao rolar a página. 46 - Cascade Revela os filhos diretos de um elemento em cascata, um pouco depois do outro, ao entrar na tela. 47 - Pin Prende uma seção na tela por uma distância extra de scroll, permitindo animar algo dentro dela enquanto ela não se move. 48 - Parallax Move um elemento numa velocidade diferente do resto da página enquanto rola, criando sensação de profundidade. 49 - Fixed Cria camadas fixas (backgrounds, palcos e janelas) que ficam presas na tela enquanto conteúdos longos, capítulos ou efeitos passam por cima. 50 - Window Uma imagem "janela" circular (ou de qualquer formato) que acompanha a posição da tela conforme a seção passa. 51 - Story Narrativa presa ao scroll: uma sequência de passos que trocam de tela conforme o visitante rola, dentro da mesma seção presa. 52 - Track Trilho horizontal: uma fileira de seções que desliza da direita pra esquerda enquanto o visitante rola verticalmente. 53 - Frames Sequência de imagens (ou um sprite sheet) trocada quadro a quadro conforme o scroll — efeito de "vídeo" controlado pela rolagem. 54 - Sections Empilha seções inteiras da página e faz uma cobrir/substituir a outra (ou deslizar na horizontal) conforme o scroll, em vez do fluxo normal de rolagem. 55 - Transição de página Anima a saída e a chegada ao clicar num link, em vez da troca instantânea e seca do navegador. 56 - SVG e Motion Path Desenha um traçado SVG na tela e move um objeto por uma curva — só com atributos, sem escrever a matemática da curva. 57 - Interações Microinterações que respondem à posição do ponteiro: cursor contextual, botão magnético, inclinação 3D (tilt) e marquee. 58 - Extras Peças pequenas de acabamento: contador regressivo, brilho ligado/pulsante, rotação e escala amarradas ao scroll. 59 - Texto 44 animações de texto em 3 famílias (Split, Scramble, Typewriter e Efeitos) e 3 modos de disparo: única, no scroll e com scroll. 60 - Conteúdo responsivo Regras extras do Sections pra quando o conteúdo de uma cena é maior que a tela, ou pra abandonar o modo "cena presa" em telas pequenas. 61 - Canvas Superfície de desenho direto em pixels 2D — animações densas e de alta performance sem criar milhares de nós no DOM. 62 - Pré-carregamento A diferença entre baixar bytes da rede e decodificar em pixels na memória — trocas visuais em 0ms sem engasgo ou tela piscando. 63 - Vídeo tradicional O elemento 64 - Vídeo no scroll O scroll da página escolhe o instante exato do vídeo (currentTime) — descer avança, subir volta, sempre pausado. 65 - Mobile e rede lenta Decide qual mídia baixar (vídeo HD, vídeo mobile ou pôster estático) antes de gastar os dados do visitante. 66 - Lottie Animações vetoriais descritas em JSON interpretadas como SVG real, leve e nítido em qualquer resolução. 67 - Rive Animações dirigidas por Máquinas de Estado reais (.riv) — você envia a intenção e o arquivo calcula a transição. 68 - Blob e Avatar Vivo Avatar e blob orgânico em SVG puro — morfa entre estados emocionais, respira e segue o cursor com física elástica.