GSAP

GSAP (платформа анимации Greensock)

GSAP-это библиотека анимации JavaScript Framework , которая превращает разработчиков в анимационных супергероев. Создайте высокопроизводительные анимации, которые работают в каждом крупном браузере. Аниматические CSS, SVG, холст, React, Vue, Webgl, цвета, струны, пути движения, общие объекты ... Все, что JavaScript может коснуться! Плагин GSAP Scrolltrigger обеспечивает анимацию на основе Scroll на основе Scroll с минимальным кодом. GSAP.MatchMedia () делает анимацию отзывчивой, удобной для доступа.

Ни одна другая библиотека не обеспечивает такую ​​передовую секвенирование, надежность и жесткий контроль при решении реальных проблем на более чем 12 миллионах сайтов. GSAP работает вокруг бесчисленных несоответствий браузера; Ваши анимации просто работают . По своей сути GSAP-это высокоскоростный манипулятор свойств, обновляя значения с течением времени с крайней точностью. Это до 20 раз быстрее, чем jQuery!

GSAP полностью гибкий; Посыпать его везде, где захотите. Нулевые зависимости.

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

Начните

Документы и установка

Посмотреть полную документацию здесь, включая руководство по установке.

CDN

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >

См. Выделенную страницу GSAP от JSDELIVR для быстрых ссылок CDN на основные файлы/плагины. На GSAP.com есть больше инструкций по установке.

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

Npm

Смотрите руководство по использованию GSAP через NPM здесь.

 npm install gsap

Ядро GSAP может оживить практически всего, включая CSS и атрибуты, плюс оно включает в себя все методы полезности, такие как интерполят (), maprange (), большинство EAPS, и он может делать съемки и модификаторы.

 // typical import
import gsap from "gsap" ;

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger" ;
import Flip from "gsap/Flip" ;
import Draggable from "gsap/Draggable" ;

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from "gsap/all" ;

// don't forget to register plugins
gsap . registerPlugin ( ScrollTrigger , Draggable , Flip , MotionPathPlugin ) ; 

Файлы NPM представляют собой модули ES, но есть также A / Dist / Directory с файлами UMD для дополнительной совместимости.

Загрузите плагины только для участников GSAP с вашей учетной записи GSAP.com, а затем включите их в свою собственную полезную нагрузку JS. Есть даже файл тарбола, который вы можете установить с помощью NPM/пряжи. GSAP имеет частный реестр NPM для членов. Разместите вопросы на наших форумах, и мы будем рады помочь.

Scrolltrigger & Scrollsmoether

Если вы ищете анимацию, управляемую свитками, плагин GSAP Scrolltrigger является новым стандартом. Также есть спутницы.

Используете React?

Существует пакет @gsap / react, который обнажает крюк useGSAP() , который является заменой для useEffect() / useLayoutEffect() , автоматизируя задачи очистки. Пожалуйста, прочитайте Руководство React для получения подробной информации.

Ресурсы

• GSAP.com
• Начало работы
• Док
• Демо и стартовые шаблоны
• Форумы сообщества
• Облегчить визуализатор
• Витрина
• Канал YouTube
• Шпаргалка
• Попробуйте бонусные плагины бесплатно
• Club GSAP (получить доступ к неограниченным бонусным плагинам, которых нет в этом репозитории)

Что такое Club GSAP?

Есть 3 основные причины, по которым кто -либо подписывает на Club GSAP:

• Чтобы получить доступ к плагинам только для участников, таких как Morphsvg, SplitText, Scrollsmoether и т. Д.
• Чтобы получить специальную коммерческую лицензию.
• Чтобы поддержать продолжающиеся усилия по развитию и подбодрить нас .

Узнать больше.

Попробуйте все бонусные плагины бесплатно!

https://gsap.com/trial

Нужна помощь?

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

Лицензия

Стандартную лицензию Greensock «Без платы» можно просмотреть по адресу https://gsap.com/standard-license. Члены Club GSAP получают дополнительные права. Смотрите https://gsap.com/licensing/ для деталей. Почему GSAP не использует MIT (или аналогичную) лицензию с открытым исходным кодом, и почему это хорошо ? В этой статье все это объясняет: https://gsap.com/why-license/

Copyright (C) 2008-2023, Greensock. Все права защищены.