Все официальные плагины для GASP JS

GASP

В сегодняшнем посте я в кратце пройдусь по списку официальных плагинов для библиотеки GASP JS и немного расскажу о каждом плагине. Решил не писать слишком длинную статью про эту библиотеку ,а разделить всё на отдельные публикации.

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

GSAP имеет довольно много плагинов:

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?

Все эти плагины можно условно разделить на ПЛАТНЫЕ и БЕСПЛАТНЫЕ решения. Для использования платных плагинов вам потребуется вступить в Club GreenSock. Все платные плагины они называют «Бонусными», как бы намекая на то, что это лишь вишенка на тортике ))

Но есть и приятные нюансы, которые вам стоит знать перед тем как использовать Платные плагины в своих проектах. Я взял и перевёл некоторые частые вопросы к разработчикам и опубликовал их ниже. С полным FAQ вы можете ознакомиться на официальном сайте.

Есть ли ограничение на количество проектов, в которых я могу использовать инструменты GreenSock в качестве участника Business Green?

Нет. Коммерческая лицензия, которая предоставляется с членством GreenSock в клубе Business Green, распространяется на неограниченное количество приложений/сайтов/программного обеспечения/игр, которые ваша организация продает во время действия членства (подробности см. в лицензионном соглашении). Однако не забудьте получить соответствующий уровень членства в зависимости от количества разработчиков, связанных с вашей организацией.

Могу ли я включить код GreenSock в свою библиотеку с открытым исходным кодом?

Безусловно, но есть несколько предостережений: вы не можете включать какие-либо бонусные плагины/классы только для членов в свой инструмент с открытым исходным кодом (по очевидным причинам), и вы должны четко представлять, что код GreenSock использует свою собственную отдельную модель лицензирования. Мы поощряем использование инструментов 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

  • DrawSVG
  • Physics2D
  • PhysicsProps
  • ScrambleText
  • CustomBounce
  • Requires CustomEase
  • CustomWiggle
  • Requires CustomEase
  • GSDevTools
  • Inertia
  • MorphSVG
  • MotionPathHelper
  • SplitText
  • Commercial license

Приятный бонус для тех, кто дочитал до конца

Ну и на сладенькое дам вам ссылочку на супер пупер шпаргалку по GSAP JS. Она очень помогает при работе с этой замечательной библиотекой.

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