Задать вопрос
sinout
@sinout
Frontend Developer
javascript

CSS и JS анимации, как освоить?

Работаю 2 года JS разработчиком, пишу в основном на TypeScript. Умею в html5 и css3 в плане верстки, верстал довольно много в начале. На тех проектах что я верстал, анимации были простые, т.е transition: all 0.3s ease; - хватало в 90% случаев и я как-то не парился по этому поводу. Но вот сегодня открыл codepen, посмотрел на различного рода работы с анимацией svg, html элементов и меня это дико заинтересовало. Кто имел дело со сложными анимациями на странице, или просто умеет во все эти штуки, подскажите ресурсы, библиотеки на которые стоит тратить время и вообще откуда начать копать ?

P.S С svg работал на уровне вставки в документ и все)
  • Вопрос задан
  • 4636 просмотров
Комментировать
Подписаться 46 Оценить Комментировать
Решения вопроса 1
mudrenokanton
@mudrenokanton
frontend dev
Просто начните пытаться реализовать свои идеи. Возникнут вопросы, найдете на них ответы. Так и научитесь.
Со знанием базовых вещей будет проще конечно, но все равно прогресс чувствуется когда садишься и делаешь.

По SVG:
commons.oreilly.com/wiki/index.php/SVG_Essentials/...
Книга по основам, я читал в более адекватном epub формате
https://sarasoueidan.com/tags/svg/index.html
Блог Сары (SVG, но можно и про CSS&JS почитать), более практичные и полезные вещи, читал с конца к началу

По JS:
https://classroom.udacity.com/courses/ud860/lesson...
Это база для понимания "че оно лагает?"
https://developers.google.com/web/tools/chrome-dev...
Понимание возможностей DevTools, очень упрощает жизнь в перспективе
https://github.com/getify/You-Dont-Know-JS
И конечно знание самого JS всегда нелишнее

По библиотекам и анимации:
Сам codepen, понятное дело. Смотрите в чужой код, пытайтесь разобраться.
https://www.youtube.com/playlist?list=PLkEZWD8wblt...
Более-менее можно прочувствовать что такое GSAP вообще, неплохой начальный курс
https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/
Сама документация и туториалы на сайте, можно и на их youtube канале что-то подсмотреть.
https://tympanus.net/codrops/
Много полезного с примерами

Всякого рода математика:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
https://www.youtube.com/user/codingmath/videos?flo...
Можно залипнуть, чтобы понимать как все эти векторные фишки делаются на canvas

Еще есть 3D, но это отдельная тема.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
SV0L0Ch
@SV0L0Ch
Разработчик специализируюсь на Bitrix и Wordpress
Рекомендую https://cssanimation.rocks/ много интересных примеров и обучающих материалов по анимациям.
Ну и как писали выше надо попробовать реализовать свою идею. Я впервые более-менее понял как работать с анимациями когда сделал анимированную модель солнечной системы на чистом css.
Ответ написан
Комментировать
Комментировать
abyrkov
@abyrkov
JavaScripter
Что касается JS-анимации - то тут множество библиотек, самой популярной из которых является всем известный jQuery. Но интересно другое. В основе всех этих библиотек лежит один и тот же код, основанный на requstAnimationFrame. Он приблизительно таков:
function animate(el, property, startVal, endVal, time, easing) {
  var start = Data.now();
  function reanimate(now) {
    var l = easing(time / (now - start));
    l = l > 1 ? 1 : l;
    el[property] = startVal + (endVal - startVal) * l;
    if(l < 1) requestAnimationFrame(reanimate);
  }
  requestAnimationFrame(reanimate);
Ответ написан
Комментировать
Комментировать
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
https://developer.mozilla.org/en-US/docs/Web/SVG/E...
https://developer.mozilla.org/en-USdocs/Web/API/Ca...
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция и обучение по API Яндекс Маркета
24 апр. 2024, в 17:52
20000 руб./за проект
Сайт с вебзвонками и чатами на react
24 апр. 2024, в 17:33
10000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
24 апр. 2024, в 17:26
6000 руб./за проект
Ещё заказы