Chapter 109: Vue scroll animation

Core Idea

Create scroll-triggered or scroll-linked animations with Motion for Vue. Use whileInView for viewport triggers and useScroll to link animations to scroll progress.

Key Concepts

• Scroll-triggered animations: Scroll-triggered animations are just normal animations that fire when an element enters or
• One-time animations: With the inViewOptions
• Changing scroll container: By default
• Setting state: It's also possible to set state when any element (not just a motion component) enters and
• Scroll-linked animations: Scroll-linked animations are created using motion values and the useScroll hook.
• Value smoothing: This value can be smoothed by passing it through useSpring.
• Transform other values: With the useTransform hook
• Track element scroll offset: Read the full useScroll docs to discover more about creating the above effects.
• Track element within viewport: Read the full useScroll docs to discover more about creating the above effects.

Code Examples

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

• What it demonstrates: Core usage pattern for Vue scroll animation.

Key Takeaways

1. Scroll-triggered: A normal animation is triggered when an element enters the viewport.
2. Scroll-linked: Values are linked directly to scroll progress.
3. Vue scroll animation supports Scroll-triggered animations.

Connects To

• Vue <motion /> component: related Motion doc page.
• useInView: related Motion doc page.
• Motion values: related Motion doc page.
• useScroll: related Motion doc page.
• useTransform: related Motion doc page.