25. Animating Error Messages

Published 15 days ago

Sometimes, adding that little bit of extra effort goes a long way towards impressing your users and helping them reach a decision on whether or not they'd like to proceed with your product. Even though our frontend validation is looking great, it can be even better with the addition of subtle, clean animations that only fire when an error message is revealed or hidden.

This episode will introduce you to:

  1. GSAP (Green Sock Animation Platform)
  2. Vue transition components
  3. Nuxt global comopnents
  4. Transition component processes

Additional Resources

./components/transitions/RevealText.vue
<template>
  <transition
    :appear="appear"
    :css="false"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    mode="out-in"
  >
    <slot />
  </transition>
</template>

<script>
import gsap from 'gsap'

export default {
  props: { appear: { type: Boolean, default: false } },
  data() {
    return {
      height: null
    }
  },
  methods: {
    beforeEnter(element) {
      gsap.set(element, {
        y: '80%',
        opacity: 0
      })
    },
    enter(element, done) {
      const width = getComputedStyle(element).width

      element.style.width = width
      element.style.position = 'absolute'
      element.style.visibility = 'hidden'
      element.style.height = 'auto'

      const height = getComputedStyle(element).height

      element.style.width = null
      element.style.position = null
      element.style.visibility = null
      element.style.height = 0

      gsap.to(element, {
        duration: 1,
        height,
        y: '0%',
        opacity: 1,
        ease: 'expo',
        onComplete: () => {
          element.style.height = 'auto'
          done()
        }
      })
    },
    leave(el, done) {
      gsap.to(el, {
        duration: 0.3,
        height: 0,
        opacity: 0,
        onComplete: done
      })
    }
  }
}
</script>

Comments

Want to participate?

Create a free Chris Courses account to begin

or
Sign In
d
devDale posted 10 days ago

Hi Chris. What host do you use for chriscourses.com?

0
chris posted 9 days ago

Hi Dale - I use a Digital Ocean VPS. I started with the smallest droplet at $5 a month, and slowly upgraded it as I needed towards the $20 a month plan. I could probably get away with running the site on just $5 a month, but I also run a couple of my other sites off the same server, so want to make sure I have enough processing power for all of them.

0
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2020 Chris Courses. All rights reserved.