Анимация кнопки меню в React JS + GSAP | Hamburger Button animation
🖥 5 полезных JS-библиотек для анимации 🟡GSAP (GreenSock Animation Platform) GSAP даёт возможность анимировать буквально всё, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое. Библиотека очень производительная — примерно в 20 раз быстрее, чем jquery. Соответственно, особых лагов в приложении не будет. GSAP позволяет анимировать любое из свойств CSS одним из нескольких способов. При помощи библиотеки можно указать продолжительность анимации и задать ей определённые свойства. 🟡Anime.js Ещё одна отличная библиотека, которая предназначена для анимации CSS-свойств, SVG, DOM-атрибутов и JavaScript-объектов. В сжатом виде она весит всего 10 килобайт. Но при этом библиотека очень функциональна, у неё отличная документация и масса возможностей. 🟡React Spring Крайне полезна для создания анимаций, соответственно, в React-приложениях. Для этого у Spring есть масса хороших инструментов, позволяющих создавать плавные, отзывчивые и высокопроизводительные анимации с достаточно реалистичной физикой. 🟡Three.js Отличная open-source-библиотека для создания и отображения анимированной 3D-графики в браузерах. Она представляет собой набор инструментов для разработки трёхмерных сцен, объектов, камер и материалов. Плюс для управления освещением, тенями и анимацией. Скрипты Three.js могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. 🟡Popmotion Также предоставляет инструменты для анимации — на этот раз интерфейса. Написана библиотека на TypeScript и весит всего 4,5 Кб. Удобна тем, что любую функцию можно отдельно импортировать. Кроме того, она может работать вместе с любыми JavaScript-фреймворками, в браузере и Node. 📎 Подробнее Кстати, а какие JS-библиотеки для анимации вы регулярно используете? Пишите) @javascript_react
Как подключить JS файл к своему сайту?
Эта статья вряд ли кому пригодится, но если среди читателей есть совсем новички, я буду ссылаться на неё из других статей в будущем, поехали. Есть несколько вариантов подключить скрипт, он может быть размещен у вас на компьютере, хостинге или на CDN. В любом случаи в первую очередь нам нужно получить путь или ссылку на этот файл. Возьмем для примера подключение jQuery. На официальном сайте мы можем скачать библиотеку или же воспользоваться CDN. Выбрав способ через CDN, мы кликаем на необходимую версию jQuery и нам сразу предлагают скопировать html код для вставки на сайт...