Vue Animation To Do List Project

Summary

A tiny to do list Vue JS animation project with routing, GSAP, custom toasts and vue transitions.

When you view the demo, test out the following animations:

• Page routing transitions
• Toggle message button
• Error toast (when trying to add an empty to do)
• Success toast (when you add a to do)
• Delete a to do item
• Page element animations

Tip: Remove all of the to do items!

Tech and Tools

• JavaScript
• CSS
• HTML
• cPanel
• Vue JS
• GSAP

Dependencies

package.json

"dependencies": {
    "core-js": "^3.6.5",
    "gsap": "^3.11.4",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.0.0"
}

Sample code

App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/contact">Contact</router-link>
  </div>

  <router-view v-slot="{ Component }">
    <transition name="route" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  background: #f2f2f2;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}

.route-enter-from {
  opacity: 0;
  transform: translateX(100px);
}
.route-enter-active {
  transition: all 0.3s ease-out;
}
.route-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
.route-leave-active {
  transition: all 0.3s ease-in;
}
</style>

Router - index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

Demo

Open demo from a sub folder on my website (cPanel hosting).

Link to Demo