@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]

Preset: Fade in

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

Preset: Roll left

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

Preset: Pop

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

Preset: Slide bottom

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

Preset: Slide when visible from top

<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

                <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

                <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

                <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

                <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>
👇