Ответ
Работал с GSAP (GreenSock Animation Platform) – мощная библиотека для сложных анимаций с точным контролем времени и плавностью. Пример:
gsap.to(".box", {
duration: 1,
x: 100,
rotate: 360,
ease: "power2.out"
});Также использовал Framer Motion для React-анимаций. Удобен декларативным подходом:
<motion.div
animate={{ scale: 1.2 }}
transition={{ duration: 0.5 }}
/>Для простых анимаций применял Animate.css – добавлял готовые CSS-классы:
<div class="animate__animated animate__bounce"></div>Знаком с принципами WAAPI (Web Animations API) – нативный браузерный API, но реже использовал в продакшене из-за необходимости полифилов.
Ответ 18+ 🔞
А, ну ты про анимации вебовые спрашиваешь? Ёпта, ну это ж моя тема, сейчас расскажу, как оно на самом деле бывает, а не в учебниках.
Смотри, если тебе надо, чтобы всё двигалось чётко, плавно и по расписанию, как поезд в метро (ну, почти), то тут без GSAP — просто никуда. Библиотека, блядь, мощнейшая, как русский мужик после трёх стаканов — делает что хочет. Хочешь коробку на сто пикселей вправо и с разворотом на 360 градусов за секунду? Запросто, хуле.
gsap.to(".box", {
duration: 1,
x: 100,
rotate: 360,
ease: "power2.out"
});Вот это ease: "power2.out" — это вообще магия, блядь. Без него анимация будет как дерганая маршрутка, а с ним — будто на лимузине катишь. Контроль времени — просто овердохуищный, можно такие последовательности строить, что сам от себя офигеваешь.
А если ты в мире React сидишь, как сурок в норе, то Framer Motion — твой лучший друг, пидарас шерстяной. Тут всё декларативно, прямо в JSX. Хочешь, чтобы дивчик подрос?
<motion.div
animate={{ scale: 1.2 }}
transition={{ duration: 0.5 }}
/>Написал и забыл. Он сам всё сделает, красавец. Удобно, блядь, до нельзя, особенно когда компоненты друг за другом как дурачки должны появляться.
Но бывает же, что задача — проще пареной репы. Ну там, кнопка подпрыгнула или текст мигнул. Зачем тут городить огород? Нашёл Animate.css, сунул пару классов — и вуаля, в рот меня чих-пых, готово!
<div class="animate__animated animate__bounce"></div>Всё, пиздец. Никакого JS, чистая магия CSS. Для прототипов или мелких фишек — идеально, как семечки щёлкать.
А ещё есть, блядь, нативная штука — WAAPI (Web Animations API). В теории — красота, всё прямо в браузере, без лишних библиотек. Но на практике... Ну, знаешь, как с новым стандартом в подъезде: вроде обещали лифт починить, а он всё равно не работает. Приходится полифилы тащить, а это уже не то ощущение. Поэтому в продакшене я его редко трогал, подозрение ебать чувствую к таким нативным экспериментам.
Короче, выбор инструмента — это как выбор оружия в драке. Для дуэли на саблях — GSAP, для быстрой потасовки в подворотне — Animate.css, а если ты в современном ритме живёшь — Framer Motion тебе в помощь. Главное — не перемудрить, а то получится не анимация, а ебаный цирк с конями.