如何在 Elementor 中添加 GSAP 动画(免费模板)

Elementor内部可以运行完整的GSAP动画,分文揭秘,钉横向卷轴,卷轴擦除视差,计数器,所有这些,没有插件开发,没有功能。php编辑,你的客户端保持编辑每个标题和颜色的技巧是 小部件生成器 在主插件中:将 HTML、CSS 和 JS 粘贴一次,标记应可编辑的内容,它就成为正常的 Elementor 小部件,任何人都可以掉落到页面上并从面板中编辑。

GSAP 登陆模板(一个虚构的动作工作室,叫 Playhead),为了证明这一点,我构建了一个完整的单页 GSAP 登陆模板,并将每个部分转换成一个可导入的小部件,你可以 将所有六个小部件下载为一个 zip 在这篇文章的结尾,只需点击几下即可导入它们,然后将它们拆开以了解它们的工作原理。

在本指南中,我将逐步介绍我如何构建英雄部分小部件,然后总结其他五个部分。如果您曾经想将 HTML/CSS/JS 设计转换为 Elementor,包括您使用 ChatGPT 或 Claude 生成的代码,这就是工作流程。

1个快捷方式开始前:如果你要的运动是一排移动的图像,你可能根本不需要写GSAP,我们已经发货了 20个旋转木马和滑块小部件 以同样的方式构建,一个以 3D 方式旋转侧面板,一个将卡片从堆栈上剥离,一个绕弯曲边缘滑动,每个滑块都作为您从面板编辑的普通元素器小部件导入。

其中八个在免费插件上运行,十二个需要 Pro。即使没有一个是完全匹配的,导入最接近的一个并从空编辑器开始读取其中的 JS 就会跳动,而这篇文章下方的构建步骤正是将 JS 转变为控件的原因。

什么是 GSAP 动画?

GSAP(GreenSock 动画平台)是一个 JavaScript 动画库,它可以对网页上的任何内容进行动画化—文本、图像、SVG、CSS 属性—具有准确的帧定时和轻松的控制。它为滚动效果和文本提供动力,让您在获奖网站上看到,并且从 3.13 版本开始,整个库(包括 ScrollTrigger 和 SplitText 等高级插件)100% 免费。

最后一部分比人们意识到的更重要 SplitText(将头条新闻分解为单独动画角色的插件)过去每年花费 99 美元以上,位于 “Club GreenSock” 付费墙后面。Webflow 收购 GSAP 后,一切都免费了。因此,WordPress 用户唯一真正的障碍是集成,这就是这篇文章删除的内容。

问题:元素师不会说 GSAP

Elementor内建的动作效果涵盖入口动画、基本视差、滑鼠追踪, 80%的页面都不错。但是他们做不到:

• 分体文本揭示了每个角色以自己的延迟动画化的位置
• 固定部分,水平滚动,页面垂直滚动
• 滚动擦除动画与精确的滚动位置相关(ScrollTrigger 的专长)
• 一个动画切换到下一个动画的链式时间线
• 速度反应效应,元素响应访客滚动的速度

通常的解决方法都有一个缺陷。您可以将代码粘贴到 HTML 小部件中,但随后标题文本生活在您的客户端永远不敢触摸的代码块内。您可以安装 GSAP 特定动画插件,但仅限于其预设效果。您可以将脚本手工输入您的儿童主题,但现在编辑标题需要开发人员。

将 GSAP 动画添加到元素器中的 4 种方法(比较)

如果您只需要一个卷轴上的淡入淡出,预设插件就真的很好。当您想要其他人都没有的动画时,Widget Builder 会获胜,因为您(或人工智能)编写了它。您完成一次代码工作,将可编辑部分连接到控件,从那时起,它的行为就像任何库存元素小部件一样:文本字段、颜色选择器、链接控件、批次。

免费模板:完整的 GSAP 着陆页面,作为 6 个小部件

Playhead是一个虚构的运动工作室的一页网站,我故意选择了那个利基:对于一个运动工作室来说,动画 於 组合,因此每个效果都赢得了它的位置。该页面在 GSAP 3.15 上运行,带有 ScrollTrigger 和 SplitText,从官方 CDN 加载。

下载中的六个小部件:

1. 英雄 —SplitText人物大揭秘,视差菱形,漂流辉光球,磁性按钮
2. 帐篷 —无限的跑马灯,当访客滚动得更快时,它会加速
3. 工作画廊 —带活卡计数器和基于速度的卡片偏斜的固定水平滚动
4. 统计 — 进入视口时从零滚动的计数器
5. 过程 —四个简易曲线,它们实际上是自己绘制的,每个曲线都使用自己的 GSAP 简易
6. CTA —滚动触发的分文显示,带有磁性电子邮件按钮

每个小部件都是独立的:作用域 CSS 使其无法与您的主题发生冲突,它自己的 GSAP 加载器即使所有六个小部件都位于同一页面上,也会获取库一次,并且会出现后备功能,因此如果 CDN 发生故障,内容也会保持可见。还尊重缩减运动偏好。在操作系统中关闭动画的访问者会获得一个静态页面。

我如何一步一步构建英雄小部件

这是概括的部分 任何 你永远想要的动画。每次都一样的七个步骤。

第 1 步:从 HTML、CSS 和 JS 工作开始

源可以是任何东西:您欣赏的 CodePen、您编码的部分或从 AI 聊天中输出。我的英雄是三个文件—标记、样式以及构建 GSAP 时间线的脚本。在触摸 Widget Builder 之前,请确保它作为浏览器中的普通。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>

Notice 我把标题拆成三个代币而不是一个,重音词(“move”)的样式不同—斜体衬线,琥珀色,动画—所以它得到了自己的控制,编辑的人永远不需要知道;他们只是看到三个标记的文本字段,每个代币都变成一个 文本控制 在建设者。

按钮获得 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);
}

改变“初级” 色彩控制 and 钮扣,发光球体,钻石形状都一起更新,这就是让小部件感觉被设计而不是组装的原因。

5步:从CDN加载GSAP—一次

JS 注入了带有保护 ID 的 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,什么都没有改变,如果你不知道,这正是一个AI会很乐意为你写的代码(下面更多内容)。

第 6 步:在 Widget Builder 中创建 Widget

在您的 WordPress 仪表板中: 主插件 → 小部件生成器 → 添加新内容。命名小部件,选择一个图标,然后将您的三个文件粘贴到HTML,CSS和JS选项卡中。

现在每个令牌添加一个控件:19 个我的英雄—四个眉毛文本、四个标题字段、描述、两个带有链接的按钮、滚动提示以及 Style 选项卡上的五种颜色。控制名称必须与令牌完全匹配: {{title_line_one}} token 需要一个名为 的控件 title_line_one。完全控制参考存在于 小部件生成器文档.

1个值得复制的细节:给每个颜色控件一个与你的设计相匹配的默认值。一个导入灰色的小部件,因为它的颜色控件是空的,即使它不是,看起来也会坏。

第 7 步:将其放入 Elementor 中并像任何小部件一样进行编辑

Publish小部件,它出现在Master Addons下的Elementor面板中,拖到一个页面上,左侧面板显示您标记的字段更改“我们制作”到您自己的标题,重新着色重音,将按钮指向您的定价页面GSAP时间线一直贯穿每个编辑,这就是整个承诺:动画复杂性隐藏,内容编辑暴露。

其他五个部分,简而言之

跑马灯(3 个控件)。 Ticker 文本为无间隙 CSS 循环打印两次,GSAP 接手对滚动速度做出反应,快速滚动,加速高达 4 倍,然后缓解回退有趣的教学示例,因为回退是纯 CSS:如果 GSAP 从不加载,它仍然滚动。

工作库(22 个控件)。 Showpiece。ScrollTrigger 固定部分而卡轨水平平移,计数器滴答 01/05,卡片根据滚动速度略有倾斜。五张卡片,每张卡片都有可编辑的标题、时间码和标签。在移动设备上,它会降级为原生滑动转盘,无需固定,无需 JS。Elementor 中需要一个全宽部分,以便引脚数学工作。

统计数据(13 个对照)。 4个数字,当滚动到视图时,可以轻松地计算博览会,最终的数字生活在标记本身,因此即使使用JavaScript,禁用访问者也会看到“142”, 而不是“0”。

程(20个控制)。 Page上我最喜欢的自负:四个过程步骤,每个步骤都配上一条SVG宽松曲线,它使用那个精确的宽松度自己绘制。线性曲线线性绘制,退出的曲线超调。代码标题是可编辑的文本控件,因此您可以将GSAP引用交换为自己的步骤描述。

CTA(11 个对照)。 Hero一样的分文技巧但是在滚动上触发,加上一个跟随光标的磁性按钮,弹簧弹回弹性轻松。将URL控件指向一个mailto:链接,这是一个联系部分。

下载模板(6 个小部件,一个 Zip)

下载 gsap-animation-elementor-widgets.zip —所有六个小部件JSON文件,免费,无电子邮件门。

开始前的一条说明:免费版本的 Master Addons 附带有限的小部件生成器,并且附带这些小部件使用的完整功能集 硕士插件专业版.要导入:

1. 解压缩下载—您将看到六个 JSON 文件,每个部分一个
2. 去 主插件 → 小部件生成器 在您的 WordPress 仪表板中
3. 单击 进口、选择一个JSON文件,然后确认
4. 要(你不需要所有的六个)的部分重复
5. 使用 Elementor 打开任何页面,然后从主插件类别中拖动小部件

导入后一切都可编辑: 88 个控件跨越六个小部件,每种颜色,每条标题,每条链接。无需上传图像。所有视觉效果均为 CSS 和 SVG,这也使整个模板保持在 200KB 以下。

AI 角度:将任何生成的设计转换为元素器

AI工具现在就写出真正好的GSAP代码。向ChatGPT或Claude询问“带有GSAP分体文本显示的英雄部分,黑暗背景,滚动视差”你将在一个响应中得到工作HTML,CSS和JS。问题始终是最后一英里:那个代码被卡为静态文件,对在Elementor中进行编辑的客户端来说毫无用处。

Widget 生成器是最后一英里。一个提示模式, 效果很好:

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文件,AI代码通常有效,但“通常”不是你想在客户端的实时页面中发现的一个词。

性能:保持 GSAP 动画快速

• 1次加载库。 5步中受保护的脚本ID在多个小部件中自动处理此问题。
• 动物转变和不透明度不是宽度/高度/顶部/左侧。 GSAP 默认执行此操作 x, y、和 scale —浏览器合成器处理它们,无需回流。
• 尊重偏好-减少-运动。 模板中的每个小部件都会检查它并服务于静态内容。可访问性,还有电池寿命。
• 总成本很小。 GSAP 核心 + ScrollTrigger + SplitText 大致缩小了 90KB,比大多数单英雄图像要少,将模板与精简页面配对,您将舒适地通过核心网络生命体;我们的 动画效果指南 涵盖更广泛的速度图景。

GSAP 感觉超出你的需要,大师插件也出格无代码运动— 入口动画, 浮动效应并且 动画系统 —零设置。GSAP 用于当预设停止足够时。

视频教程指南

也许您不喜欢阅读,所以我为您制作了一个视频,介绍如何在 Elementor 编辑器中下载并安装带有 GSAP Animation 的小部件。

常见问题

从模板开始,然后构建您自己的模板

6个小部件导入, 打破它们, 重建它们 理解Widget Builder最快的方法是在导入后打开英雄小部件, 看看19如何控制映射到其HTML选项卡中的令牌, 之后,你书签的每个CodePen和每个AI生成的部分都成为小部件候选者。

Master Addons 在 30,000 多个 WordPress 网站上运行,完整的 Widget Builder 附带 Pro 版本。查看包含在中的所有内容 小部件和扩展页面、下载上面的模板,您的第一个自定义 GSAP 小部件今天就可以上线。