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

• Official Vue Transition Documentation

• CSS Tricks Intro to Vue Animations

./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>