Animații în cod cu Claude, Modvia Academy, 2026
GSAP e librăria pe care o alege orice studio când brief-ul zice 'fă să pară un film'. Gratuit pentru uz comercial din 2024. Testat în luptă de peste 15 ani.
import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';
export function Hero() {
const ref = useRef(null);
useGSAP(() => {
const tl = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.8 } });
tl.from('.eyebrow', { y: 20, opacity: 0 })
.from('.title', { y: 40, opacity: 0 }, '-=0.4')
.from('.sub', { y: 30, opacity: 0 }, '-=0.4')
.from('.cta', { scale: 0.9, opacity: 0, duration: 0.5 }, '-=0.2');
}, { scope: ref });
return (<section ref={ref}>...</section>);
}
Framer Motion e React-native. Îți învelești elementul în <motion.div> și primești gesturi, animații de layout, animații de exit, totul declarativ. Mai ușor decât GSAP pentru lucrul cu UI.
import { motion, AnimatePresence } from 'framer-motion';
<AnimatePresence mode='wait'>
<motion.div
key={selectedTab}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -8 }}
transition={{ duration: 0.25, ease: [0.32, 0.72, 0, 1] }}
>
{tabContent}
</motion.div>
</AnimatePresence>
Anime.js strălucește la path-uri SVG, morphing și demo-uri HTML/JS de sine stătătoare, unde nu vrei React. Mai mic decât GSAP, mai țintit decât Framer.
import anime from 'animejs/lib/anime.es.js';
const path = document.querySelector('#logo path');
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
anime({
targets: path,
strokeDashoffset: [length, 0],
easing: 'easeInOutQuad',
duration: 2000,
autoplay: true,
});
Motion One învelește Web Animations API cu o sintaxă curată. Folosește-l când contează dimensiunea bundle-ului (Astro, vanilla JS, cod custom în Webflow).
import { animate, stagger } from 'motion';
animate(
'.card',
{ y: [40, 0], opacity: [0, 1] },
{ duration: 0.6, delay: stagger(0.1), easing: [0.32, 0.72, 0, 1] }
);
| Nevoie | Alege |
|---|---|
| Poveste cinematică fixată pe scroll | GSAP + ScrollTrigger |
| Taburi, modale, drag, gesturi în React | Framer Motion |
| Logo sau iconiță SVG animată | Anime.js |
| Bundle sub 5KB, site vanilla JS | Motion One |
| Cod custom în Webflow | Motion One sau CSS vanilla |
| Site de marketing cu 50+ efecte | GSAP |
Vreau ca animația asta să se simtă [încrezătoare / jucăușă / luxoasă / techy / catifelată]. Dă-mi 3 curbe de easing cu valori cubic-bezier și explică de ce se potrivește fiecare. Apoi spune-mi intervalul de durată care merge cu fiecare.
Obiectiv. Simte diferența. Alege-ți librăria de zi cu zi.
Obiectiv. Împinge Framer Motion la limită.
Obiectiv. Prinde un job care justifică curba de învățare a GSAP.