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

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á:

1. 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).
2. 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 🤣).
3. 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! 🚀