25. Animating Error Messages

Published 3 months 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 3 months ago
0
chris posted 3 months ago
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.