Exploring JavaScript Hooks for transitions

To access the code file for this example, refer to https://github.com/PacktPublishing/Frontend-Development-Projects-with-Vue.js-3/tree/v2-edition/Chapter08/Example8.03

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 JavaScript-based rather than CSS-based, such as Velocity.js or GSAP, which require Hooks to be set using JavaScript events and external animation handlers.

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