JavaScript Hooks

As we learned in the previous section, we can use custom transition classes to integrate external third-party CSS animation libraries for styling effects. However, there are external libraries that are not CSS-based, but JavaScript-based, such as Velocity.js or GreenSock Animation API (GSAP), which require hooks to be set using JavaScript events and external animation handlers.

In order to use the Velocity.js or GSAP libraries in the Vue app, you need to install them separately by using the npm install or yarn add command, as follows:

• To install Velocity.js, use these commands:

  npm install velocity-animate 
  #Or
  yarn add velocity-animate

• To install GSAP, use these commands:

  npm install gsap
  #or
  yarn add gsap

Being a Vue.js component means the transition component supports binding custom handlers to a list of events as props. Consider the following example:

<transition
  @before-enter="beforeEnter"
  @enter="...