What are some examples of using Framer Motion with Vue 3?

What are some examples of using Framer Motion with Vue 3?

Framer Motion is a popular library for animations in React, but you can achieve similar effects in Vue 3 using libraries like VueUse or Vue Transition. Would you like to see specific examples?

Yes, please provide a few examples of animations I can create.

Sure! Here are a few examples:

1. Fade In/Out: Use Vue's transition component to create a fade effect when elements enter or leave the DOM.
2. Slide In: Animate elements sliding in from the side using CSS transitions.
3. Scale Up: Create a scale-up effect on hover using Vue's reactive properties.

How can I implement a fade-in effect?

To implement a fade-in effect, you can use the <transition> component in Vue. Here's a simple example:

<template>
  <transition name="fade">
    <div v-if="isVisible">Hello, I fade in!</div>
  </transition>
  <button @click="isVisible = !isVisible">Toggle</button>
</template>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

That looks great! Can I customize the duration of the fade?

Absolutely! You can adjust the duration by changing the transition property in the CSS. For example, to make it 1 second, you would set transition: opacity 1s;.