IndyDevDan's Blog

Menu

@vueuse/motion Cheatsheet

A cheatsheet for adding animations to your Vue.js app using motion

🎥 Watch the full guide on youtube

⭐️ Create a new vue app with vite

⭐️ Install @vueuse/motion

📖 Refresh the page to retrigger animations

[Example Title]

[Example @vueuse/motion content]
👇
[Example output]

Install (Bash)

📋 Copy
npm install @vueuse/motion

Preset: Fade in

📋 Copy
<div v-motion-fade>This div will fade in</div>
👇
This div will fade in

Preset: Roll left

📋 Copy
<div v-motion-roll-left>This div will roll left</div>
👇

Preset: Pop

📋 Copy
<div v-motion-pop>This div will pop in</div>
👇

Preset: Slide bottom

📋 Copy
<div v-motion-slide-bottom>This div will slide in from the bottom</div>
👇

Preset: Slide when visible from top

📋 Copy
<div v-motion-slide-visible-top>This div will slide in from the top when it's visible</div>
👇

Custom: Slow fade in + slide up

📋 Copy
            
<script setup>
    const motionFadeUp = {
        initial: {
            opacity: 0,
            y: 200,
        },
    enter: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 2000
        }
    }
</script>

<div v-motion="motionFadeUp">This div will fade in and slide up</div>
👇

Custom: Text glow

📋 Copy
            
<script setup>
    const motionGlowText = {
        initial: {
            'text-shadow': '0 0 1px rgba(0, 0, 0, 0)',
        },
        enter: {
            'text-shadow': '0 0 10px rgba(0, 200, 0, 1)',
            transition: {
            duration: 1000,
            repeat: Infinity,
                repeatType: 'reverse',
            }
        }
    }
</script>

<p v-motion="motionGlowText">This div will glow green</p>
👇

Custom: Button glow

📋 Copy
            
<script setup>
    const motionButtonGlow = {
        initial: {
            'box-shadow': '0 0 1px rgba(0, 0, 0, 0)',
        },
        enter: {
            'box-shadow': '0 0 10px rgba(0, 200, 0, 1)',
            transition: {
            duration: 1000,
            repeat: Infinity,
                repeatType: 'reverse',
            }
        }
    }
</script>

<button v-motion="motionButtonGlow">This button will glow green</button>
👇

Custom: Div shake

📋 Copy
            
<script setup>
    const motionShake = {
        initial: {
            x: 0,
        },
        enter: {
            x: 5,
            transition: {
                duration: 250,
                repeat: Infinity,
                repeatType: 'reverse',
            }
        }
    }
</script>

<div v-motion="motionShake">This div is shaking</div>
👇
🏡 Home