将 Motion 与 Webflow 集成
Webflow已经具备一些动画功能，但您可能希望通过引入自定义代码来更进一步
为以前无法制作动画的值（如渐变和蒙版）制作动画
硬件加速滚动动画
复杂的时序序列
Three.js
如果您从 GSAP 迁移，您将获得更好的 Lighthouse 性能评分，甚至可以在没有商业许可证的情况下使用 Motion。
在本指南中，我们将介绍如何将 Motion 添加到您的项目中，并概述如何选择性地生成自定义脚本以获得更好的性能。
安装
首先，打开项目中的“页面”对话框，然后在要添加 Motion 的页面上单击“编辑页面设置”
向下滚动，直到找到“在 <body /> 标签之前”对话框。 在这里，我们可以添加我们的 Motion 代码。
在这里，您可以添加一个新的 script 代码块来导入 Motion。
<script type="module"> import { animate, scroll } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/+esm" animate("header", { opacity: 1 }) </script>
您可以将这里的 11.13.5 替换为您要安装的任何版本。最新的已发布版本可以在npm 包页面.
此脚本包含所有 Motion 导入，但是如果您只想使用 animate 函数的迷你版本（仅 2.3kb），从 https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm 导入，还可以实现更大的文件大小节省
<script type="module"> import { animate } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm" </script>
自定义脚本
通过直接从此 URL 导入脚本，您将导入所有内容，甚至包括您不使用的 Motion 部分。但是，Motion 的一大优点是它具有 可摇树优化 的特性。这意味着您可以使用像这样的打包工具Vite或Rollup仅包含您使用的部分。
实际上，对于您所有的 Webflow 自定义代码来说，这是一个很好的实践。它将确保您将所有内容打包成一个整洁的包，并且只打包您需要的部分。
例如，如果您只想使用 animate函数，您可以将上面的代码替换为这个
import { animate } from "motion" animate("header", { opacity: 1 })
使用 Rollup 构建，上传到 CDN，然后使用 async JS 标记包含，将进一步提高 SEO 分数
<script async src="https://yourdomain.com/my-script.js"></script>
下一步
现在您已经在 Webflow 项目中运行了 Motion，您可以按照我们的快速入门指南开始制作动画！
Webflow已经具备一些动画功能，但您可能希望通过引入自定义代码来更进一步
为以前无法制作动画的值（如渐变和蒙版）制作动画
硬件加速滚动动画
复杂的时序序列
Three.js
如果您从 GSAP 迁移，您将获得更好的 Lighthouse 性能评分，甚至可以在没有商业许可证的情况下使用 Motion。
在本指南中，我们将介绍如何将 Motion 添加到您的项目中，并概述如何选择性地生成自定义脚本以获得更好的性能。
安装
首先，打开项目中的“页面”对话框，然后在要添加 Motion 的页面上单击“编辑页面设置”
向下滚动，直到找到“在 <body /> 标签之前”对话框。 在这里，我们可以添加我们的 Motion 代码。
在这里，您可以添加一个新的 script 代码块来导入 Motion。
<script type="module"> import { animate, scroll } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/+esm" animate("header", { opacity: 1 }) </script>
您可以将这里的 11.13.5 替换为您要安装的任何版本。最新的已发布版本可以在npm 包页面.
此脚本包含所有 Motion 导入，但是如果您只想使用 animate 函数的迷你版本（仅 2.3kb），从 https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm 导入，还可以实现更大的文件大小节省
<script type="module"> import { animate } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm" </script>
自定义脚本
通过直接从此 URL 导入脚本，您将导入所有内容，甚至包括您不使用的 Motion 部分。但是，Motion 的一大优点是它具有 可摇树优化 的特性。这意味着您可以使用像这样的打包工具Vite或Rollup仅包含您使用的部分。
实际上，对于您所有的 Webflow 自定义代码来说，这是一个很好的实践。它将确保您将所有内容打包成一个整洁的包，并且只打包您需要的部分。
例如，如果您只想使用 animate函数，您可以将上面的代码替换为这个
import { animate } from "motion" animate("header", { opacity: 1 })
使用 Rollup 构建，上传到 CDN，然后使用 async JS 标记包含，将进一步提高 SEO 分数
<script async src="https://yourdomain.com/my-script.js"></script>
下一步
现在您已经在 Webflow 项目中运行了 Motion，您可以按照我们的快速入门指南开始制作动画！
Webflow已经具备一些动画功能，但您可能希望通过引入自定义代码来更进一步
为以前无法制作动画的值（如渐变和蒙版）制作动画
硬件加速滚动动画
复杂的时序序列
Three.js
如果您从 GSAP 迁移，您将获得更好的 Lighthouse 性能评分，甚至可以在没有商业许可证的情况下使用 Motion。
在本指南中，我们将介绍如何将 Motion 添加到您的项目中，并概述如何选择性地生成自定义脚本以获得更好的性能。
安装
首先，打开项目中的“页面”对话框，然后在要添加 Motion 的页面上单击“编辑页面设置”
向下滚动，直到找到“在 <body /> 标签之前”对话框。 在这里，我们可以添加我们的 Motion 代码。
在这里，您可以添加一个新的 script 代码块来导入 Motion。
<script type="module"> import { animate, scroll } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/+esm" animate("header", { opacity: 1 }) </script>
您可以将这里的 11.13.5 替换为您要安装的任何版本。最新的已发布版本可以在npm 包页面.
此脚本包含所有 Motion 导入，但是如果您只想使用 animate 函数的迷你版本（仅 2.3kb），从 https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm 导入，还可以实现更大的文件大小节省
<script type="module"> import { animate } from "https://cdn.jsdelivr.net.cn/npm/motion@11.13.5/mini/+esm" </script>
自定义脚本
通过直接从此 URL 导入脚本，您将导入所有内容，甚至包括您不使用的 Motion 部分。但是，Motion 的一大优点是它具有 可摇树优化 的特性。这意味着您可以使用像这样的打包工具Vite或Rollup仅包含您使用的部分。
实际上，对于您所有的 Webflow 自定义代码来说，这是一个很好的实践。它将确保您将所有内容打包成一个整洁的包，并且只打包您需要的部分。
例如，如果您只想使用 animate函数，您可以将上面的代码替换为这个
import { animate } from "motion" animate("header", { opacity: 1 })
使用 Rollup 构建，上传到 CDN，然后使用 async JS 标记包含，将进一步提高 SEO 分数
<script async src="https://yourdomain.com/my-script.js"></script>
下一步
现在您已经在 Webflow 项目中运行了 Motion，您可以按照我们的快速入门指南开始制作动画！
