Animation Curve Blueprint:
- Enter/exit animations: ease-out
- An element that is already on the screen and is changing position: ease-in-out (car accelerating and decelerating)
- Constant animations (marquee): linear
- Simple hover effects (background color, text color, etc.): ease
Avoid using ease-in, almost never looks good as it's slower at the beginning which makes the UI feel unresponsive/slow.
⇒ General Animation (animates all)
⇒ API animation (CSS/DOM/SVG) 💕
Animation Versus → Libs comparison
→ Motion ⭐
Motion
https://motion.dev/
→ React Spring
https://www.react-spring.dev/
→ GSAP
https://greensock.com/gsap/
→ Anime.js
https://animejs.com/
→ Mo.js
https://mojs.github.io/
⇒ Web Editors - Pre-built animations
⇒ React Lottie 🚩
React - Lottie
LottieFiles: Download Free lightweight animations for website & apps.
⇒ Rive 🚩
Rive Runtimes
⇒ Simple Animation - Lib or Class-based
→ React Magic Motion
https://www.react-magic-motion.com/
→ AutoAnimate - Formkit
https://auto-animate.formkit.com/#usage
→ React Simple Animate
https://react-simple-animate.vercel.app/
→ React Flip Move
https://www.npmjs.com/package/react-flip-move
→ Animate.style
https://animate.style/
⇒ Color Animation / Gradient
→ Granim.js
Cria animações gradientes!!
https://sarcadass.github.io/granim.js/
→ UVCanvas
Beautiful shaded canvas! Animated backgrounds!
https://uvcanvas.com/
⇒ Elements Generator 💬
→ Particle.js
Para criação de partículas.
https://particles.js.org/
⇒ 3D Render and Animations
→ Three.js
https://threejs.org/
→ React Tree Fiber (renderer for Three.js)
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
→ Theatrejs (animation from Three.js)
https://www.theatrejs.com/
⇒ 2D Creative Canvas / Visual Sketching
→ p5.js
https://p5js.org/