Frontend-разработка ⛄

Frontend-разработка

Project maintained by Dvurechensky-Docs Hosted on GitHub Pages — Theme by mattgraham

⬆ Вернуться к оглавлению

🎞 Анимации

🎞 Анимации

🔹 animate.css

👉 Готовые CSS-анимации

fade, bounce, slide
просто подключил и используешь

💡 Для:

быстрых эффектов
кнопок / появления

🔹 Animate Plus

👉 Очень маленькая библиотека (~2KB)

минимализм
JS-анимации

💡 Когда важен размер ⚡

🔹 Anime.js

👉 Гибкая анимационная библиотека

работает с CSS, SVG, DOM
timeline

💡 Очень популярная 🔥 👉 баланс мощность/простота

🔹 bounce.js

👉 CSS-анимации с “пружиной” 💡 Для:

живых эффектов

🔹 choreographer

👉 Управление сложными анимациями

зависимости
синхронизация

💡 Когда много анимаций

🔹 Dynamics.js

👉 Физика в анимациях

пружины
инерция

💡 Для “живого UI” 🎛

🔹 GSAP

👉 Самая мощная библиотека

высокая производительность
timeline
контроль

💡 Профессиональный уровень 🔥🔥🔥

🔹 Hover.css

👉 Эффекты при наведении 💡 Для:

кнопок
UI

🔹 impulse

👉 Физика для мобильных 💡 Для:

touch-интерфейсов

🔹 KUTE.js

👉 Модульный движок анимаций 💡 Альтернатива Anime.js

🔹 mo.js

👉 motion-анимации

всплески
частицы

💡 Для эффектов 🎆

🔹 popmotion

👉 движок движения

анимации
физика
ввод

💡 мощный инструмент

🔹 rebound

👉 spring-анимации

как в iOS

💡 для реалистичного UI

🔹 repaintless

👉 анимации без лагов

без reflow

💡 оптимизация

🔹 Scene.js

👉 timeline-анимации 💡 для сложных сцен

🔹 Semantic UI transition

👉 встроенные анимации 💡 если используешь Semantic UI

🔹 Sequence.js

👉 анимации слайдов 💡 для storytelling

🔹 shifty

👉 tweening engine 💡 базовые анимации

🔹 snabbt

👉 быстрые transform-анимации 💡 для UI

🔹 Snap.svg

👉 работа с SVG + анимация 💡 для векторной графики

🔹 tween.js

👉 tweening (основа анимаций) 💡 low-level инструмент

🔹 velocity.js

👉 ускоренные JS-анимации 💡 альтернатива jQuery animate

🔹 vivus

👉 “рисует” SVG

линии появляются 💡 эффект “рисования” ✏️🔥