Vue

Motion is fully framework agnostic, therefore it works within any JavaScript environment, including Vue 3.

There's not currently a dedicated Motion library for Vue. But it is already possible to use Motion with Vue, so in this guide, we'll learn how to:

• Animate on enter and exit

• Animate timeline sequences

• Animate when props change

• Change HTML and CSS when an element enters or leaves the viewport

• Animate on scroll

Install

Install Motion into the Vue project.

npm

Enter and exit animations

To animate elements when they enter and exit the DOM, we can use Vue's Transition component.

<template>
  <Transition :css="false">
    <h1>Hello world</h1>
  </Transition>
</template>

<style>
  h1 { opacity: 0; }
</style>