Scroll Animation with Vue 3 and VueUse

ScrollTransition Component to implememt fade-in and slide-in animations while scrolling through the element using Vue 3, VueUse and Tailwind CSS.

Article

For more details, please follow through my blog post:

Blog: Scroll Animation with Vue 3 and VueUse

Demo

Libraries

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Other Tools

• TailwindCSS
• VueUse

Recommended Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

• Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.