Все плагины для GASP JS

GreenSock (GSAP) имеет множество дополнительных плагинов, которые можно использовать для расширения функциональности библиотеки.

Большинство плагинов GreenSock (GSAP) доступны для бесплатного использования в лицензиях для разработки и обучения. Но некоторые из них, такие как SplitText, доступны только в коммерческих лицензиях. Вы можете найти дополнительную информацию о доступности и ценах каждого из плагинов на сайте GreenSock.

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

Если вы используете их в коммерческом проекте, вам нужно купить коммерческую лицензию.

Flip (смахнуть, стряхнуть, щелкать, ударять, слегка подбросить, перевернуть)

Flip Plugin

Позволяет плавно переходить между двумя состояниями, даже если в структуре DOM происходят радикальные изменения, такие как изменение родительских элементов элементов, которые обычно заставляют их переходить на новую позицию/размер. Переходы пользовательского интерфейса становятся удивительно простыми в кодировании.

ScrollTrigger (Триггер прокрутки)

ScrollTrigger

Создает потрясающую анимацию на основе прокрутки с минимальным кодом. Или запускать что-либо, связанное с прокруткой, даже если это не имеет ничего общего с анимацией.

MotionPath (Траектория движения)

MotionPathPlugin

Анимируйте что угодно (SVG, DOM, холст, общие объекты и т. д.) по траектории движения в любом браузере и используйте волшебную функцию «выравнивания», чтобы идеально выровнять элементы.

MotionPathHelper (помощник для редактирования траекторий/путей движения)

MotionPathHelper

Переводится как «Помощник траектории движения». MotionPathHelper облегчает редактирование путей в браузере.

InertiaPlugin (Инерция)

InertiaPlugin

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

Draggable (бросать)

Draggable

Когда вы сочетаете Draggable  с InertiaPlugin , вы получаете идеальную команду тегов для создания элемента DOM, который можно перетаскивать, вращать, перебрасывать и даже прокручивать! Вы можете устанавливать ограничения, сложные правила привязки и плавно останавливаться, и все это с помощью всего лишь одной строки кода! Без шуток. Отлично работает и на сенсорных устройствах. 

ModifiersPlugin (Модификатор)

ModifiersPlugin

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

Хотя на сайте разработчиков есть реккомендация, что начиная с тетьей версии GASP, для перехвата значений лучше использовать плагин GSAP SnapPlugin.

SnapPlugin

SnapPlugin

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

MorphSVGPlugin

MorphSVGPlugin

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

DrawSVGPlugin

DrawSVGPlugin

Позволяет постепенно отображать (или скрывать) штрихи SVG, чтобы они выглядели так, как будто они нарисованы. Похожий эффект я видел и использовал ранее. Библиотека называлась vivus.js, но вот с GSAP еще не работал. Уверен, что будет работал красивей из за плавности и малой нагрузки на устройство

TextPlugin

TextPlugin

Анимирует текстовое содержимое элемента DOM, заменяя его по одному символу или слову за раз.

PhysicsPropsPlugin

PhysicsPropsPlugin

Позволяет вам анимировать любое числовое свойство любого объекта на основе скорости и/или ускорения.

Physics2DPlugin

Physics2DPlugin

Предоставляет простые физические функции для анимации координат x и y объекта (или «слева» и «сверху») на основе комбинации скорости, угла, гравитации, ускорения, угла ускорения и/или трения.

EaselPlugin

EaselPlugin

Tweens использует специальные свойства, связанные с EaselJS, для таких вещей, как насыщенность, контрастность, оттенок, раскрашивание, яркость, экспозиция и оттенок.

CSSRulePlugin

CSSRulePlugin

Позволяет GSAP анимировать необработанные правила таблицы стилей, которые влияют на все объекты определенного селектора.

CSSPlugin

CSSPlugin

С помощью CSSPlugin GSAP может анимировать практически любое свойство элементов DOM, связанное с CSS.

BezierPlugin

BezierPlugin

Анимируйте практически любое свойство (или свойства) вдоль кривой Безье, которую вы определяете как массив точек/значений.

PixiPlugin

PixiPlugin

Позволяет легко анимировать объекты Pixi.js с помощью GSAP. Анимируйте положение, масштаб, цветовые эффекты и многое другое, используя всю мощь и контроль GSAP и скорость рендеринга Pixi.js.

CustomBounce

CustomBounce

CustomBounce позволяет создавать удивительные анимации отскока с помощью сжатия и растяжения.

CustomWiggle

CustomWiggle

CustomWiggle создает сложные кривые ослабления покачивания, устанавливая несколько простых параметров.

CustomEase

CustomEase

CustomEase освобождает вас от ограничений стандартных параметров плавности; создать буквально любую вообразимую кривую замедления, просто нарисовав ее в визуализаторе замедления или скопировав/вставив путь SVG. Нулевые ограничения. Используйте столько контрольных точек, сколько хотите.

jquery.gsap.js

jquery.gsap.js

Автоматически перехватывает вызовы jQuery.animate() и использует TweenLite для управления анимацией. Получите мгновенный прирост скорости без редактирования кода!

ScrollToPlugin

ScrollToPlugin

Анимирует положение прокрутки окна или элемента DOM.

ScrambleTextPlugin

ScrambleTextPlugin

Скремблирует текст в элементе DOM с помощью рандомизированных символов

SplitText Text Animation

Split<span>Text</span> Text Animation

SplitText — это простая в использовании утилита JavaScript, которая позволяет разбивать HTML-текст на символы, слова и строки.

AttrPlugin

AttrPlugin


Анимирует любой числовой атрибут элемента DOM.

Где скачать скрипты плагинов для GASP JS для того что бы протестировать?

Вы можете скачать скрипты плагинов для GSAP (GreenSock Animation Platform) на официальном сайте GreenSock. На сайте есть раздел «Download» , где вы можете найти все доступные версии библиотеки, включая отдельные файлы со всеми плагинами или без них. Вы можете загрузить библиотеку в разных форматах, таких как .zip или .min.js . Кроме того, вы можете использовать npm или yarn чтобы

установить GSAP и плагины в свой проект. Для этого вам нужно иметь установленный Node.js и менеджер пакетов. Вы можете использовать команду npm install gsap или yarn add gsap для установки библиотеки и команду npm install gsap-xxx или yarn add gsap-xxx для установки конкретного плагина, где xxx — название плагина.

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

У вас есть два варианта ознакомиться с библиотекой и всеми плагинами:

Все плагины для GASP JS
  1. По ссылке пожно перейти на платформу CodePen и поиграться со всеми существующими плагинами GASP. Обращаю ваше внимание на то, что все ссылки на скрипты, которые там опубликованы РАБОТАЮТ ТОЛЬКО НА CODEPEN
  2. Вы можете скачать все скрипты GASP плагинов с сайта. Эти скрипты, в отличии от опубликованных на CODEPEN будут работать на ваших проектах. Но не забывайте про лицензирование и используйте только в ознакомительных целях.

Как отличить какие плагины входят в ядро GSAP, а какие нужно подключать дополнительно?

При работе с этой замечательной библиотекой я столкнулся с проблемой избыточности подключения плагинов — несколько раз подключал те плагины, которые уже включены в основной JS-файл. Поэтому давайте разбираться что входит в основной скрипт.

Что включено в ядро ​​GSAP

  • Tween
  • Timeline
  • attr
  • css
  • endArray
  • modifiers
  • snap
  • Eases, содержащий в себе следущие методы:
    • «linear» (a.k.a. «none» or «power0»)
    • «power1» (a.k.a. «quad»)
    • «power2» (a.k.a. «cubic»)
    • «power3» (a.k.a. «quart»)
    • «power4» (a.k.a. «strong» or «quint»)
    • «back»
    • «bounce»
    • «circ»
    • «elastic»
    • «expo»
    • «sine»
    • «steps(n)»
  • Utility Methods, содержащий в себе сделующие методы:
    • checkPrefix()
    • clamp()
    • distribute()
    • getUnit()
    • interpolate()
    • mapRange()
    • normalize()
    • pipe()
    • random()
    • selector()
    • shuffle()
    • snap()
    • splitColor()
    • toArray()
    • unitize()
    • wrap()
    • wrapYoyo()

Дополнительные плагины, которые включены в ядро Версии: 3.9.1

  • DraggableCDN
  • EaselCDN
  • FlipCDN
  • MotionPathCDN
  • PixiCDN
  • ScrollToCDN
  • ScrollTriggerCDN
  • Text

Дополнительные удобства (вспомогательные плагины) включены в ядро Версии: 3.9.1

  • «rough()»
  • «slow()»
  • «expoScale()»
  • CustomEase

Платные плагины для GASP JS

Все плагины для GASP JS
  • DrawSVG
  • Physics2D
  • PhysicsProps
  • ScrambleText
  • CustomBounce
  • Requires CustomEase
  • CustomWiggle
  • Requires CustomEase
  • GSDevTools
  • Inertia
  • MorphSVG
  • MotionPathHelper
  • SplitText
  • Commercial license
Юрий Ронин