文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

示例

获取 Motion+

文档

文档

JS

React

Vue

示例

开始使用

动画

组件

Motion values

Hooks

集成

JS

React

Vue

示例

开始使用

动画

组件

Motion values

Hooks

集成

Vue

滚动

滚动动画

滚动动画有两种类型

  • 滚动触发： 当元素进入视口时，触发一个普通动画。

  • 滚动链接： 值直接链接到滚动进度。

Motion 能够实现这两种类型的动画。

滚动触发动画

滚动触发动画只是在元素进入或离开视口时触发的普通动画。

Motion 提供了这个whileInView属性来设置当元素进入视图时的动画目标或变体。

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
/>

一次性动画

通过这个inViewOptions ，可以设置 once: true，这样一旦元素进入视口，它就不会动画返回。

<motion.div
  initial="hidden"
  whileInView="visible"
  :inViewOptions="{ once: true }"
/>

更改滚动容器

默认情况下，当元素进入/离开窗口时，它将被视为在视口内。 这可以通过提供另一个可滚动元素的 ref 来更改。

<script setup>
  import { ref } from "vue"
  const scrollRef = ref(null)
</script>

<template>
    <div ref="scrollRef" :style="{ overflow: 'scroll' }">
      <motion.div
        :initial="{ opacity: 0 }"
        :whileInView="{ opacity: 1 }"
        :inViewOptions="{ root: scrollRef }"
      />
    </div>
</template>

有关更多配置选项，请查看这个motion组件API 参考。

设置状态

也可以使用 useInViewhook.

在任何元素（不仅仅是 motion 组件）进入和离开视口时设置状态。

滚动链接动画滚动链接动画是使用motion valueshook.

和 useScroll 创建的

useScroll 返回四个 motion values，其中两个存储以像素为单位的滚动偏移量 (scrollX 和 scrollY)，另外两个存储滚动进度，值介于 0 和 1 之间。

<script>
import { useScroll } from "motion-v"
const { scrollYProgress } = useScroll();
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />  
</template>

这些 motion values 可以直接传递给特定的样式。 例如，将 scrollYProgress 传递给 scaleX 非常适合作为进度条。

值平滑

<script setup>  
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
  stiffness: 100,
  damping: 30,
  restDelta: 0.001
})
</script>

<template>
 <motion.div :style="{ scaleX }" />
</template>

此值可以通过 useSpring 进行平滑处理。

通过这个useTransformhook转换其他值

<script setup>  
const backgroundColor = useTransform(
  scrollYProgress,
  [0, 0.5, 1],
  ["#f00", "#0f0", "#00f"]
)
</script>

<template>
  <motion.div :style="{ backgroundColor }" />
</template>

示例

，很容易使用进度 motion values 在任何值之间混合，例如颜色

跟踪元素滚动偏移量

跟踪视口内的元素

视差

滚动速度和方向阅读useScroll完整文档

滚动动画有两种类型

  • 滚动触发： 当元素进入视口时，触发一个普通动画。

  • 滚动链接： 值直接链接到滚动进度。

Motion 能够实现这两种类型的动画。

滚动触发动画

滚动触发动画只是在元素进入或离开视口时触发的普通动画。

Motion 提供了这个whileInView属性来设置当元素进入视图时的动画目标或变体。

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
/>

一次性动画

通过这个inViewOptions ，可以设置 once: true，这样一旦元素进入视口，它就不会动画返回。

<motion.div
  initial="hidden"
  whileInView="visible"
  :inViewOptions="{ once: true }"
/>

更改滚动容器

默认情况下，当元素进入/离开窗口时，它将被视为在视口内。 这可以通过提供另一个可滚动元素的 ref 来更改。

<script setup>
  import { ref } from "vue"
  const scrollRef = ref(null)
</script>

<template>
    <div ref="scrollRef" :style="{ overflow: 'scroll' }">
      <motion.div
        :initial="{ opacity: 0 }"
        :whileInView="{ opacity: 1 }"
        :inViewOptions="{ root: scrollRef }"
      />
    </div>
</template>

有关更多配置选项，请查看这个motion组件API 参考。

设置状态

也可以使用 useInViewhook.

在任何元素（不仅仅是 motion 组件）进入和离开视口时设置状态。

滚动链接动画滚动链接动画是使用motion valueshook.

和 useScroll 创建的

useScroll 返回四个 motion values，其中两个存储以像素为单位的滚动偏移量 (scrollX 和 scrollY)，另外两个存储滚动进度，值介于 0 和 1 之间。

<script>
import { useScroll } from "motion-v"
const { scrollYProgress } = useScroll();
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />  
</template>

这些 motion values 可以直接传递给特定的样式。 例如，将 scrollYProgress 传递给 scaleX 非常适合作为进度条。

值平滑

<script setup>  
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
  stiffness: 100,
  damping: 30,
  restDelta: 0.001
})
</script>

<template>
 <motion.div :style="{ scaleX }" />
</template>

此值可以通过 useSpring 进行平滑处理。

通过这个useTransformhook转换其他值

<script setup>  
const backgroundColor = useTransform(
  scrollYProgress,
  [0, 0.5, 1],
  ["#f00", "#0f0", "#00f"]
)
</script>

<template>
  <motion.div :style="{ backgroundColor }" />
</template>

示例

，很容易使用进度 motion values 在任何值之间混合，例如颜色

跟踪元素滚动偏移量

跟踪视口内的元素

视差

滚动速度和方向阅读useScroll完整文档

滚动动画有两种类型

  • 滚动触发： 当元素进入视口时，触发一个普通动画。

  • 滚动链接： 值直接链接到滚动进度。

Motion 能够实现这两种类型的动画。

滚动触发动画

滚动触发动画只是在元素进入或离开视口时触发的普通动画。

Motion 提供了这个whileInView属性来设置当元素进入视图时的动画目标或变体。

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
/>

一次性动画

通过这个inViewOptions ，可以设置 once: true，这样一旦元素进入视口，它就不会动画返回。

<motion.div
  initial="hidden"
  whileInView="visible"
  :inViewOptions="{ once: true }"
/>

更改滚动容器

默认情况下，当元素进入/离开窗口时，它将被视为在视口内。 这可以通过提供另一个可滚动元素的 ref 来更改。

<script setup>
  import { ref } from "vue"
  const scrollRef = ref(null)
</script>

<template>
    <div ref="scrollRef" :style="{ overflow: 'scroll' }">
      <motion.div
        :initial="{ opacity: 0 }"
        :whileInView="{ opacity: 1 }"
        :inViewOptions="{ root: scrollRef }"
      />
    </div>
</template>

有关更多配置选项，请查看这个motion组件API 参考。

设置状态

也可以使用 useInViewhook.

在任何元素（不仅仅是 motion 组件）进入和离开视口时设置状态。

滚动链接动画滚动链接动画是使用motion valueshook.

和 useScroll 创建的

useScroll 返回四个 motion values，其中两个存储以像素为单位的滚动偏移量 (scrollX 和 scrollY)，另外两个存储滚动进度，值介于 0 和 1 之间。

<script>
import { useScroll } from "motion-v"
const { scrollYProgress } = useScroll();
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />  
</template>

这些 motion values 可以直接传递给特定的样式。 例如，将 scrollYProgress 传递给 scaleX 非常适合作为进度条。

值平滑

<script setup>  
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, {
  stiffness: 100,
  damping: 30,
  restDelta: 0.001
})
</script>

<template>
 <motion.div :style="{ scaleX }" />
</template>

此值可以通过 useSpring 进行平滑处理。

通过这个useTransformhook转换其他值

<script setup>  
const backgroundColor = useTransform(
  scrollYProgress,
  [0, 0.5, 1],
  ["#f00", "#0f0", "#00f"]
)
</script>

<template>
  <motion.div :style="{ backgroundColor }" />
</template>

示例

，很容易使用进度 motion values 在任何值之间混合，例如颜色

跟踪元素滚动偏移量

跟踪视口内的元素

视差

滚动速度和方向阅读useScroll完整文档

手势

以了解更多关于创建上述效果的信息。

布局动画

保持关注

订阅
©2025 Motion Division Ltd.

网站

关于

文档

示例

Motion+

博客

赞助

社交

Discord

GitHub

X/Twitter

布局动画

保持关注

订阅
©2025 Motion Division Ltd.

网站

关于

文档

示例

Motion+

博客

赞助

社交

Discord

GitHub

X/Twitter