Vue.js + GSAP = Easily add interactivity and motion to your website

Single Page Apps, and the frameworks that support them, provide a great opportunity to add layers of interactivity and “wow-factor” to your design. In this article we will take a look at Vue.js and how to integrate the GSAP animation library to add some to your site.

Vue.js is a Javascript framework that is both powerful and easy to pick up. With the help of Vue CLI we are able to quickly scaffold new apps with all the lastest Webpack features, without spending hours configuring your Webpack setup. Simply install Vue CLI, type vue create <project-name> and you’re away!

GSAP is a JavaScript animation library that enables the rapid development of performant web animations. GSAP makes it easy for us to quickly string together animations to create a cohesive and flowing sequence.

When building the new ‘Daily Fire’ homepage we made heavy use of animations in an attempt to show how the product works. By using GSAP, rather than a GIF or video, we was able to add layers of interactivity to the animations to make them more engaging. Integrating GSAP with Vue.js, as you will see, is simple yet powerful.

Lets take a look at how to implement a simple Timeline with GSAP and Vue. We will be using .vue files in this article, these are enabled by the Webpack vue-loader, automatically available with projects created with the Vue CLI.

The basics

Lets first write some markup to get an idea for what we will be animating

<template>
    <div ref="box" class="box"></div>
</template>

<style>
.box { 
  height: 60px; 
  width: 60px; 
  background: red; 
}
</style>

Here we draw a simple red box to the DOM. Take note the ref tag on the div, this is how we will be referring to the element when introducing GSAP. Vue makes elements with ref tags available via this.$refs in your component.

Now lets introduce GSAP

<template>
  <div ref="box" class="box"></div>
</template>

<script> 
import { TimelineLite } from 'gsap'
export default { 
  mounted() { 
    const { box } = this.$refs
    const timeline = new TimelineLite() 
    
    timeline.to(box, 1, { x: 200, rotation: 90 }) 
  } 
} 
</script>

<style>
/* styles emitted */
</style>

First we import TimelineLite from GSAP, then, when the component is mounted we acquire a reference to our box element via this.$refs. We then initialize a GSAP timeline and play the animation.

The timeline instance exposes a to method, with which we pass 3 arguments:

• Arg 1: The element to animate
• Arg 2: The seconds to animate for
• Arg 3: An object describing the animation to perform

Here we can see what this small bit of code results in:

See the Pen Rotate Red Box by Samuel Parry (@smlparry) on CodePen.

Pretty simple! But lets make use of GSAP’s EasePack to give this small animation a bit more life. Using an ease is an ease’y way to make your animations feel less mechanical and more friendly. Also, you wouldn’t be making full use of GSAP’s Timeline if you didn’t queue up a few animations! Lets transition the red box to a green box, halfway through the first animation.

<template>
  <div ref="box" class="box"></div>
</template>

<script>
import { TimelineLite, Back } from 'gsap'
export default {
  mounted() {
    const { box } = this.$refs
    const timeline = new TimelineLite()
    
    timeline.to(box, 1, {
      x: 200,
      rotation: 90,
      ease: Back.easeInOut, // Specify an ease
    })
    timeline.to(box, 0.5, {
      background: 'green'
    },
    '-=0.5' // Run the animation 0.5s early
    )
  }
}
</script>

<style>
/* styles emitted */
</style>

Take note of the additional argument on line 21, here we can tell GSAP to run an animation relative to the completion of the previous. Use a += to specify a time after completion and -= to specify a time before completion.

This results in:

See the Pen Rotate To Green Box by Samuel Parry (@smlparry) on CodePen.

With that simple addition we have already made our animation a lot more lively!

For more Information and to build website using Vue.js, Hire Vue.js Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom website using Vue.js, please visit our technology page.

Content Source:

1. blog.usejournal.com