PITCH: Que tal uma biblioteca de animação que funcionará em seu HTML puro? Sem React, Vue, Angular ou qualquer outra coisa · cesarolvr

Fala, pessoal! 👋

Compartilhando aqui no que trabalhei nas últimas semanas: Uma biblioteca de animações baseada em scroll: O MurphyJS.
A ideia é ser simples, baseado em IntersectionObserver e flexível.

O que o MurphyJS faz?

Simples: Você coloca data-attributes-* no seu HTML e animação acontece ao rolar a página.

O que mais da pra fazer?

Agrupamento de elementos: Use data-murphy-group para controlar animações em conjunto, facilitando cenários onde você quer animar vários elementos de uma vez só.
Controle programático: Você pode acionar animações via JavaScript, usando métodos como murphy.play() e murphy.reset(), inclusive para grupos específicos.
Diversos tipos de animação: Suporte a efeitos como fade, slide, zoom, flip, bounce, elastic, entre outros.
Personalização total: Ajuste facilmente duração, delay, easing, distância e outros parâmetros direto nos atributos ou via API.
Eventos detalhados: MurphyJS dispara eventos em cada etapa da animação, permitindo integrações avançadas e reações customizadas no seu código.
Open source e em evolução: O código está aberto para contribuições e feedbacks aqui: https://github.com/cesarolvr/murphyjs/issues.

Demo e exemplos:

Nessa página de exemplos https://www.murphyjs.org/examples tem todas as features que implementei. São elas:

Basic Animations
- Animações simples de entrada: bottom-to-top, top-to-bottom, left-to-right, right-to-left.
Group-based Animations
- Controle de animações por grupo usando data-murphy-group.
Class-based Animations
- Animações disparadas programaticamente via classe Murphy.
Standard Easing Functions
- Exemplos com easings padrão: ease, linear, ease-in, ease-out, ease-in-out.
Material Design Easing
- Animações com easings inspirados no Material Design.
Custom Easing Functions
- Efeitos como bounce, elastic, smooth, sharp, swift, spring.
Custom Duration and Delay
- Personalização de duração e delay das animações.
Custom Distance
- Controle da distância percorrida pelo elemento durante a animação.
Combined Examples
- Combinação de diferentes efeitos, delays e distâncias.
Sequential Animations
- Animações sequenciais, como o efeito do logo murphy.js.
Custom Configuration
- Demonstração de como customizar cada atributo da animação.
Easing Functions
- Teste de diferentes funções de easing para sentir o efeito de cada uma.
Using Events for Custom Effects
- Exemplo de como usar eventos do MurphyJS para adicionar comportamentos customizados.
Flip Animations
- Efeitos de flip: flip-left, flip-right, flip-up, flip-down.
Zoom Animations
- Efeitos de zoom-in e zoom-out.
Fade Animations
- Efeitos de fade, fade-up, fade-down, fade-left, fade-right.
Rotate Animations
- Efeitos de rotação: rotate-left, rotate-right.
Scale Animations
- Efeitos de scale-up e scale-down.
Slide Animations
- Efeitos de slide-up, slide-down, slide-left, slide-right.
Bounce Animations
- Efeitos de bounce-in e bounce-out.

Perguntas pertinentes:

Se você já trabalhou com animações, provavelmente se perguntará porque usar Murphy ao invés dos concorrentes AOS e Framer-Motion. Vamos lá:

Framer-Motion nem é um concorrente de fato. É superior em todos os aspectos (de longe) mas apenas para React. Isso acarreta em 157KB de tamanho (quase 50x maior que o Murphy).
AOS também é agnóstico e funciona JS vanilla mas tem o dobro do tamanho 8KB (o que na maioria dos caso será insignificante), não é baseado em IntersectionObserver e sim em um listener simples de scroll (o que pode em alguns casos extremos causar perda de FPS), tem mais features e é mais maduro (por enquanto 🤣).
Em resumo, o Murphy pode ser uma boa saída para coisas mais simples e casuais. Te oferece uma API tanto declarativa como imperativa. Fica a gosto da pessoa codando.

Se você curte animações, procura uma alternativa ao AOS ou só quer fazer uma página com melhor acabamento sem muito tooling, use e mande uma mensagem aqui se achar algum problema: https://github.com/cesarolvr/murphyjs/issues

E deixa um starzinho lá, caso goste! https://github.com/cesarolvr/murphyjs/

Abraços! 🚀