Вы можете запустить полную GSAP анимацию внутри Elementor.Split-text раскрывает, закрепленный горизонтальный свиток, прокрутка-прочивается параллакс, счетчики, все это, без разработки плагина и без изменений functions.php, и ваши клиенты сохраняют возможность редактировать каждый заголовок и цвет. фишка в том Виджет Строитель в главных дополнениях: вставьте HTML, CSS и JS один раз, отметьте, что должно быть редактируемым, и это станет обычным виджетом Elementor, который каждый может разместить на странице и редактировать с панели.
Чтобы доказать это, я построил полный одностраничный шаблон приземления GSAP (вымышленная студия движения под названием Playhead) и преобразовал каждый раздел в импортируемый виджет. Вы можете загрузите все шесть виджетов за один зип в конце этого поста импортируйте их в пару кликов и выделите, чтобы увидеть, как именно они работают.
В этом руководстве я шаг за шагом пройдусь по тому, как я построил виджет раздела героев, затем суммирую остальные пять разделов. если вы когда-либо хотели преобразовать дизайн HTML/CSS/JS в Elementor, включая код, который вы сгенерировали с помощью ChatGPT или Клода, это рабочий процесс.
Один ярлык перед началом: если движение, которое вы хотите, представляет собой ряд изображений, которые движутся, возможно, вам вообще не нужно писать GSAP. Мы уже отправили 20 виджетов каруселей и слайдеров построен таким же образом — одна вращает боковые панели в 3D, одна снимает карты со стопки, одна едет на своих скольжениях по изогнутому ободу — и каждая импортируется как обычный виджет Элементар, который вы редактируете с панели.
Восемь из них работают на бесплатном плагине, двенадцать нуждаются в Pro. Даже если ни один из них не соответствует точно, импорт ближайшего из них и чтение JS внутри него бьется, начиная с пустого редактора, и шаги сборки дальше по этому посту - это то, что превращает этот JS в элементы управления.
Оглавление
Что такое GSAP Animation?
GSAP (GreenSock Platform) - это библиотека анимации JavaScript, которая анимирует что угодно на веб-странице (текст, изображения, свойства CSS (свойства SVG) с точным управлением синхронизацией и облегчением кадра. Она питает эффекты прокрутки, и текст показывает, что вы видите на отмеченных наградами сайтах, а начиная с версии 3.13 вся библиотека, включая плагины премиум-класса, такие как ScrollTrigger и SplitText, на 100% бесплатна.
Последняя часть имеет большее значение, чем люди осознают.SplitText (плагин, который разбивает заголовки на индивидуально анимированных персонажей) раньше стоил $99+ в год за платным экраном “Club GreenSock”. после того, как Webflow приобрел GSAP, все стало бесплатным. так что единственный реальный барьер, оставшийся для пользователей WordPress, - это интеграция, и именно это удаляет этот пост.
Проблема: Элементор не говорит GSAP
Встроенные эффекты движения Elementor охватывают анимацию входа, базовый параллакс, отслеживание мышью Хорошо для 80% страниц Но они не могут:
- Разделенный текст показывает, где каждый персонаж оживляется со своей задержкой
- Закрепленные разделы, которые прокручиваются горизонтально, а страница прокручивается вертикально
- Анимация с прокруткой, привязанная к точному положению прокрутки (специальность ScrollTrigger)
- Связанные временные рамки, где одна анимация переходит к другой
- Эффекты, реагирующие на скорость, при которых элементы реагируют на скорость прокрутки посетителя
Обычные обходные пути все имеют один общий недостаток, Вы можете вставить код в HTML виджет, но тогда текст заголовка живет внутри блока кода ваш клиент никогда не осмелится коснуться Вы можете установить GSAP-специфичный анимационный плагин, но вы ограничены его предустановленными эффектами Вы можете поставить сценарии вручную в вашей дочерней теме, но теперь редактирование заголовка требует разработчика.
4 способа добавления анимации GSAP в Elementor (сравнение)
| Метод | Пользовательские анимации? | Подходит для редактирования клиентом? | Необходимо кодирование |
|---|---|---|---|
| Вставка кода виджета HTML | Да, неограниченно | Нет текста, закопанного в коде | Каждое редактирование |
| Детская тема enquee + пользовательские JS | Да, неограниченно | Нет | PHP + JS |
| Мастер Аддоны Виджет Строитель | Да, неограниченно | Да — элементы управления | Один раз, впереди |
Заранее установленные плагины действительно хорошо, если затухание на прокрутке - это все, что вам нужно. Widget Builder выигрывает, когда вам нужна анимация, которой больше никто не владеет, потому что вы (или ИИ) ее написали. Вы выполняете работу с кодом один раз, подключаете редактируемые части к элементам управления, и с тех пор он ведет себя как любой стандартный виджет Elementor: текстовые поля, сборщики цветов, элементы управления ссылками, лот.
Бесплатный шаблон: Полная целевая страница GSAP в виде 6 виджетов
Playhead - это одностраничный сайт вымышленной киностудии. Я выбрал эту нишу специально: для киностудии анимация является портфолио, так что каждый эффект зарабатывает свое место Страница работает на GSAP 3.15 с ScrollTrigger и SplitText, загружен из официального CDN.
Шесть виджетов в загрузке:
- Герой раскрытие символов SplitText, форма ромбов параллакса, шары дрейфующего свечения, магнитные кнопки
- Шатер indu, тикер которого ускоряется, прокручивается быстрее
- Галерея работ горизонтальный свитк карты с живой картой и перекосом карты на основе скорости
- Статистика счетчики, которые сворачиваются с нуля, когда они входят в окно просмотра
- Процесс четыре смягчающие кривые, каждая из которых буквально рисует, используя свою собственную легкость GSAP
- СТА outlig-triggered с помощью магнитной кнопки электронной почты
Каждый виджет является автономным: CSS с увеличенным диапазоном, чтобы он не мог конфликтовать с вашей темой, собственный загрузчик GSAP, который получает библиотеку один раз, даже если все шесть виджетов находятся на одной странице, и резервные копии, чтобы контент оставался видимым, если CDN когда-либо выйдет из строя. Предпочтения пониженного движения также соблюдаются. Посетители, которые отключают анимацию в своей ОС, получают статическую страницу.
Как я построил виджет героя, шаг за шагом
Это та часть, которая обобщается на любой анимация, которую вы когда-нибудь захотите. Каждый раз одни и те же семь шагов.
Шаг 1: Начните с работы с HTML, CSS и JS
Источником может быть что угодно: CodePen, которым вы восхищаетесь, раздел, который вы закодировали, или вывод из чата с искусственным интеллектом. моим героем были три файла ♪ разметка, стили и сценарий, который строит временную шкалу GSAP. Прежде чем касаться конструктора виджетов, убедитесь, что он работает как простой файл.html в браузере. там отладка на 10 раз проще, чем внутри любого конструктора страниц.
Шаг 2: Отнесите все на один класс упаковки
Ваш виджет будет жить на страницах с другими виджетами, другими плагинами, другими CSS. заверните весь раздел в один уникальный класс и повесьте с него каждый селектор:
<section class="ph-hero-wrap">
...
</section>/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }Также переименовывайте общие ключевые кадры анимации. @keyframes spin становится @keyframes ph-hero-spin, так два виджета на одной странице никогда не дерутся за одно и то же имя Этот единственный шаг предотвращает 90% “мой виджет сломал страницу” поддержка билетов.
Шаг 3: Замените редактируемый текст токенами
В любом месте, где владельцу сайта могут понадобиться разные слова, замените жестко запрограммированный текст на токен в двойных фигурных скобках:
<h1 class="ph-title">
<span class="ph-split">{{title_line_one}}</span>
<span class="ph-split">{{title_line_two}}</span>
<em class="ph-serif">{{accent_word}}</em>
</h1>Обратите внимание, что я разделил заголовок на три токена вместо одного. слово (“move) стилизовано по-разному italic serif, amber, armatic uct, поэтому оно получает собственный контроль. человеку, редактирующему, никогда не нужно знать, что; они просто видят три помеченных текстовых поля. каждый токен становится a Текстовый контроль в строителя.
Кнопки получают управление URL-адресом, поэтому ссылка, переключатель новой вкладки и отсутствие выполнения всех работ с панели:
<a class="ph-btn" href="{{first_button_url.url}}"
target="{{first_button_url.is_external}}"
rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>Шаг 4: Превратите цвета бренда в элементы управления стилем
Сопротивляйтесь желанию сделать тридцать элементов управления цветом У моего героя пять: фон, текст, акцент, первичный, и приглушенный Они подают переменные CSS на обертку, и каждый производный цвет (светление, границы, тени) вычисляется из них с color-mix():
.ph-hero-wrap {
--ph-accent: {{accent_color}};
--ph-primary: {{primary_color}};
--ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}Изменить “Primary” в Контроль цвета и кнопка, светящийся шар, и ромбовидные формы все обновляются вместе, Вот что делает виджет чувствовать себя разработанным вместо собранного.
Шаг 5: Загрузите GSAP с CDN ♪ Один раз
JS вводит скрипты GSAP с защищенными идентификаторами, поэтому шесть виджетов на одной странице по-прежнему загружают библиотеку ровно один раз:
["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]Тогда сама анимация является стандартной временной шкалой GSAP. Персонажи поднимаются с шатанием, с которым появляется ударное слово back.out(2.5), алмазы стирают против положения прокрутки Если вы уже знаете GSAP, ничего не меняется Если вы этого не сделаете, это именно тот код, который ИИ с радостью напишет для вас (подробнее об этом ниже).
Шаг 6: Создайте виджет в конструкторе виджетов
На вашей панели управления WordPress: Мастер-аддоны → Виджет-строитель → Добавить новое. Назовите виджет, выберите значок, затем вставьте три файла во вкладки HTML, CSS и JS.
Теперь добавьте один элемент управления на токен: 19 для моего героя — четыре текста бровей, четыре поля заголовка, описание, две кнопки со своими ссылками, сигнал прокрутки и пять цветов на вкладке Стиль. Имя управления должно точно соответствовать токену: the {{title_line_one}} токену нужен элемент управления с именем title_line_one. Полный контрольный эталон живет в Документация Виджет Строителя.
Одна деталь, которую стоит скопировать: дайте каждому цветовому элементу по умолчанию, соответствующему вашему дизайну. виджет, который импортирует серый цвет, потому что его элементы управления цветом были пустыми, выглядит сломанным, даже если это не так.
Шаг 7: Передайте его в элемент и отредактируйте, как любой виджет
Опубликовать виджет и он появляется в панели Элементор под Главные Аддоны. перетащите его на страницу, и левая панель показывает ваши помеченные поля.Изменить “Мы make” к вашему собственному заголовку, перекрасить акцент, указать кнопки на вашей странице цен.Временная шкала GSAP продолжает работать через каждое редактирование. Вот и все обещание: сложность анимации скрыта, редактирование контента раскрыто.
Остальные пять разделов, кратко
Шатер (3 элемента управления). Текст тикера печатается дважды для цикла CSS без зазора, и GSAP берет на себя реагирование на скорость прокрутки. Прокрутите быстро, и он ускорится до 4x, а затем снова облегчится. Забавный пример обучения, потому что запасной вариант - это чистый CSS: если GSAP никогда не загружается, он все равно прокручивается.
Галерея работ (22 элемента управления). Витрина. ScrollTrigger закрепляет раздел, в то время как дорожка карты перемещается горизонтально, счетчик галочек 01 /05, и карты слегка перекосились в зависимости от скорости прокрутки. пять карт, каждая с редактируемым заголовком, таймкодом и тегами. на мобильном устройстве он деградирует до собственной карусели свайпа, не требуется закрепления и JS. Нужен раздел Elementor во всю ширину, чтобы математика контактов работала.
Статистика (13 элементов управления). Четыре числа, которые с легкостью экспо отсчитывают при прокрутке в поле зрения. конечные числа живут в самой разметке, поэтому даже с JavaScript отключенные посетители видят “142”, а не “0”.
Процесс (20 элементов управления). Мое любимое тщеславие на странице: четыре шага процесса, каждый из которых сочетается с кривой смягчения SVG, которая рисует себя, используя именно эту легкость. линейная кривая рисует линейно, кривая обратного выхода превышает. подписи кода представляют собой редактируемые элементы управления текстом, поэтому вы можете поменять ссылки GSAP на свои собственные описания шагов.
СТА (11 элементов управления). Та же техника разделения текста, что и у героя, но срабатывает при прокрутке, плюс магнитная кнопка, которая следует за курсором и упруго отталкивается назад. Направьте управление URL-адресом на ссылку mailto: и это раздел контактов.
Загрузите шаблон (6 виджетов, один молния)
Скачать gsap-animation-elementor-widgets.zip все шесть виджетов JSON, нет ворот электронной почты.
Перед началом следует отметить одно примечание: бесплатная версия Master Addons поставляется с ограниченным конструктором виджетов, а полный набор функций, который используют эти виджеты, поставляется с ним Мастер Аддоны Про. Импортировать:
- Раскройте молнию скачать (undzip the download) вы увидите шесть файлов JSON, по одному на раздел
- Перейти к Мастер-аддоны → конструктор виджетов в вашей панели управления WordPress
- Нажмите Импорт, выберите файл JSON и подтвердите
- Повторите для нужных разделов (все шесть вам не нужны)
- Откройте любую страницу с помощью Elementor и перетащите виджеты из категории "Мастер-аддоны"
Все редактируется после импорта: 88 элементов управления в шести виджетах, каждый цвет, каждый заголовок, каждая ссылка. нет изображений для загрузки. все визуальные эффекты CSS и SVG, что также держит весь шаблон ниже 200KB.
Угол искусственного интеллекта: преобразуйте любой созданный дизайн в Элементор
Инструменты ИИ пишут действительно хороший код GSAP сейчас.Спросите ChatGPT или Клода для “a раздел героя с раскрытием разделенного текста GSAP, темный фон, прокрутка параллакс” и вы получите рабочий HTML, CSS, и JS в одном ответе. проблема всегда была последней милей: этот код застрял как статический файл, бесполезный для клиента, который редактирует в Elementor.
Виджет Строитель это та последняя миля. быстрый шаблон, который работает хорошо:
Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapperСпросите эти четыре ограничения заранее, и вывод упадет в Widget Builder почти без изменений. Сначала я все равно протестирую его как плоский HTML-файл. Код искусственного интеллекта обычно работает, но “обычно” - это не то слово, которое вы хотите обнаружить на живой странице клиента.
Производительность: Обеспечьте быструю анимацию GSAP
- Загрузите библиотеку один раз. Защищенные идентификаторы сценариев с шага 5 обрабатывают это автоматически в нескольких виджетах.
- Одушевляйте трансформации и непрозрачность, а не ширина/высота/верх/левый. GSAP делает это по умолчанию с
x,yиscale— ручки браузера без рефлоу. - Уважение предпочитает - уменьшенное движение. Каждый виджет в шаблоне проверяет его и обслуживает статический контент. доступность, но и время автономной работы.
- Общая стоимость невелика. GSAP ядро + ScrollTrigger + SplitText примерно 90 КБ минифицировано, что меньше, чем у большинства изображений отдельных героев. Соедините шаблон с компактными страницами, и вы с комфортом пройдете Core Web Vitals; наш руководство по анимационным эффектам охватывает более широкую картину скорости.
Если GSAP кажется больше, чем вам нужно, Master Addons также поставляет движение без кода из коробки ♪ анимации входа, плавающие эффектыи система анимации – с нулевой настройкой. GSAP предназначен для случаев, когда предустановок перестает быть достаточно.
Видео Учебное пособие
Может быть, вы не предпочитаете читать, поэтому я создаю для вас видео о том, как скачать и установить виджет с GSAP Animation в вашем редакторе Elementor.
Часто задаваемые вопросы
Можно ли использовать GSAP на сайте WordPress?
Да. Поскольку GSAP 3.13 (апрель 2025 г.), вся библиотека, включая ранее платные плагины, такие как ScrollTrigger, SplitText и MorphSVG, бесплатна для всех целей, включая коммерческую версию. Шаблон в этом посте использует GSAP 3.15 из общедоступного CDN.
Работает ли Widget Builder с Elementor Free?
Да, он работает с бесплатной версией Elementor い Elementor Pro не требуется. на стороне Master Addons бесплатный плагин включает ограниченную версию Widget Builder; полный набор функций поставляется с Мастер Аддоны Про.
Будет ли анимация GSAP замедлять работу моего сайта Elementor?
Не осмысленно, если вы загружаете библиотеку один раз и анимируете преобразования, Три файла GSAP в общей сложности около 90KB, сравнимо с одним оптимизированным изображением.Ошибки высокой производительности - это загрузка GSAP на виджет (избегайте здесь с защищенными идентификаторами сценариев) и анимация свойств макета.
Могу ли я использовать это для преобразования любого HTML-шаблона в Elementor?
Любой автономный раздел, да — анимированный или нет. Применяются те же самые шаги: разверните CSS, токенизируйте текст, прослушайте цвета, затем вставьте в конструктор. полные многостраничные темы с шаблонами PHP - это другая работа, но разделы целевой страницы преобразуются чисто.
Нужно ли моим клиентам знать GSAP, чтобы редактировать виджеты?
Нет. таков смысл преобразования После импорта редактирование происходит целиком через панель Elementor управляет wws текстовыми полями, цветосборниками, входами ссылок Код анимации невидим для редактора.
Что произойдет, если GSAP CDN недостижим?
Каждый виджет в этом шаблоне имеет запасной вариант: текст отсоединяется, шатер возвращается к CSS-анимации, галерея становится каруселью свайпов, а статистика показывает их окончательные номера Посетители получают рабочую страницу в любом случае.
Начните с шаблона, затем создайте свой собственный
Импортируйте шесть виджетов, сломайте их, перестройте. самый быстрый способ понять конструктор виджетов - открыть виджет героя после импорта и посмотреть, как 19 элементов управления сопоставляются с токенами на его вкладке HTML. После этого каждый CodePen, который вы добавляете в закладки, и каждый раздел, созданный AI, становится кандидатом в виджеты.
Мастер Аддоны работает на 30,000+ сайтов WordPress, и полный Widget Builder поставляется с версией Pro.Посмотреть все, что включено в страница виджетов и расширений, загрузите шаблон выше, и ваш первый пользовательский виджет GSAP может быть жив сегодня.
