GASP JS: Современная библиотека для разработки анимацонных эффектов на сайте

GASP

Считайте GSAP швейцарским армейским ножом для анимации javascript… но лучше. Эта библиотека анимирует все (свойства CSS, объекты библиотеки canvas, SVG, React, Vue, Angular, общие объекты, что угодно), и решает бесчисленные несоответствия браузеров, причем все это с молниеносной скоростью (до 20 раз быстрее, чем jQuery), включая автоматическое ускорение преобразований на GPU.

В доказательство эти слов разработчики опубликовали ссылочку на speed-test (тест скорости) на базе платформы Code pen Этот тест позволит вам сравнить производительность библиотеки GASP JS с другими популярными библиотеками:

  • Motion One
  • anime
  • Web Animations API
  • jQuery 3
  • Zepto (CSS)
Фотография экрана спид-теста анимационных библиотек.

Результаты спидтеста меня очень порадовали и окончательно убедили в том, что GASP JS — это отличное решение для анимации.

Проще говоря, GSAP — это самая надежная высокопроизводительная библиотека анимации JavaScript на планете, возможно, именно поэтому Google рекомендует ее для анимации на основе JS, а все крупные рекламные сети исключают ее из расчета размера файла. В отличие от монолитных фреймворков, которые диктуют вам, как структурировать ваши приложения, GSAP абсолютно гибок; рассыпайте его, где хотите.

Про разработчиков
По началу я не понял как правильно называть библиотеку, GreenSock или GASP. Лишь изучив сайт разработчиков до меня дошло, что компания-разработчик библиотеки GASP называется GreenSock, что переводится как «Зелёный носок».

И логотип у них весьма запоминающийся. на нём изображён супергерой в плаще и зелёном носке.

Скриншот с сайта компании Green Sock: https://greensock.com/

Какие преимущества есть у GASP JS
Быстрая
Производительность имеет первостепенное значение, особенно на мобильных устройствах с медленными процессорами. Если нам не достаточно мощности, чаще всего анимация работает медленно, или вовсе не запускается. Именно поэтому библиотека GASP JS реализует максимальную плавность в анимации элементов.

При этом она соответствует всем современным стандартам веб-разработки и имеет обратную совместимость со старыми браузерами. Так заявлено на сайте разработчиков. Я ради интереса открывал их примеры с демками в старом IE (ниже 10й версии) и они работали без каких либо сбоев. Круто ведь!

Анимация реализованная на базе библиотеки GASP остаётся плавной даже при пиковой нагрузке на сайт или приложение.

Разработчики достигли этого результата благодаря многочисленным тестам и доработкам своей библиотеки.

Надёжная
JavaScript-анимация, созданная для профессионалов, GSAP оснащена функциями, благодаря которым большинство других движков выглядят как дешевые игрушки.

С ней вы можете анимировать всё что угодно:

цвет,
обводку(beziers),
свойства css(css properties),
массивы (Arrays)
и многое другое…
А еще у неё под капотом спрятано много приятных сюрпризов:

Создавайте потрясающие эффекты, запускаемые прокруткой (scroll-triggered).
Округление значений (Round values),
Плавный реверс на лету — (smoothly reverse = анимации в обратном порядке)
Использование относительных значений,
Автоматическое выстраивание взаимосвязей между свойствами анимируемых объектов и функциями, которые используются в анимации getter/setter,
Гибкий функционал использования параметров и опций для сглаживания конфликтующих кадрами и анимациями.
Возможность удобного и наглядного определения обратных вызов(callback — функция, которая будет вызвана по завершению асинхронного действия),
Возможность легко выстраивать последовательности кадров (даже с перекрывающимися кадрами) и используйте повторяющиеся css-анимации типа repeat/yoyo
и многое другое…
Даже если вам не понятна большая часть перечня, который я привожу выше — не беда. Вы без труда сможете начать с чего то простого и не сложного, оживляя элементы на своём сайте, руководствуясь документацией на сайте разработчика.

Отличная совместимость
HTML, SVG, React, Vue, Angular, jQuery, Canvas, CSS, новые браузеры, старые браузеры, мобильные устройства и многое другое — GSAP прекрасно уживается с ними.

Используйте свои любимые инструменты, не прыгая через бесконечные обручи для обеспечения совместимости. GSAP «просто работает».

Можно анимировать что угодно
Именно так. Все, что угодно. Нет предопределенного списка свойств, из которого можно выбирать. Любое числовое свойство любого объекта может быть анимировано. GSAP обрабатывает сложные строковые значения с вложенными цветами практически в любом формате.

Он автоматически распознает значения на основе функций.

Существует масса полезных методов для решения распространенных проблем. Возможности безграничны. Единственное условие — анимируем всё до чего дотянется JavaScript, то есть работаем с DOM.

Легко расширяемая библиотека
Модульная, гибкая и сверхэффективная архитектура плагинов сохраняет ядро движка, позволяя добавлять практически любые функции с помощью дополнительных плагинов. GSAP обладает удивительной мощью в удивительно маленьком корпусе.

Я когда стал изучать плагины, которые предлагает сайт разработчиков, в голове сразу начали мелькать старые проекты с не реализованным функционалом по анимации — захотелось все взять и переделать на новый лад. Проще говоря — очень много расширений, которые сильно упростят разработку сайта

Без дополнительных зависимостей
GSAP не построен поверх каких-либо сторонних инструментов, таких как jQuery (хотя он отлично работает с jQuery). Такой подход минимизирует время загрузки и увеличивает производительность.

Расширенная последовательность
Вы не ограничены последовательностью «один за другим»; анимация может накладываться друг на друга сколько угодно. Вкладывайте временные шкалы в другие временные шкалы. Вставляйте пробелы, обратные вызовы, метки, ступенчатые кадры и многое другое.

Вы получаете точный контроль над временем и беспрецедентную гибкость для создания выразительных анимаций с минимальным кодом.

Какие плагины есть у GASP JS

Их слишком много, что бы перечислять в этой статье, поэтому я решил опубликовать их отдельно. Переходите по этой ссылке, что бы узнать обо всех преимуществах работы с анимациями на базе библиотеки GASP JS.

Оцените статью
Code4web
Добавить комментарий