Vue.js + GSAP = đ„ Animations
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 I made heavy use of animations in an attempt to show how the product works. By using GSAP, rather than a GIF or video, I 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
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
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:
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.
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:
With that simple addition we have already made our animation a lot more lively!
With a basic understanding of those principles we can start building more complex, engaging animations. As we will see in the next example its really just about playing with it until you get it right!
đ„ Building on the basics
Letâs re-create a piece of an animation used on the Daily Fire homepage, this friendly little slack bubble:
Lets start with the markup:
We now have:
Now lets give it some life!
While this may look scary at first, take a second to digest what is actually happening. All it is, is a few CSS transforms queued up sequentially. Notice there are a few custom easeâs in there. GSAP offers a fun little tool to configure an ease to your liking: GSAP Ease Visualizer.
Now we have:
đ„ Looping
The above GIF is deceptive, itâs looping, but the code isnât. Lets take a look at how we can loop animations with GSAP and Vue.
GSAPâs TimelineLite offers an onComplete
attribute which we can assign a function, we will use that to loop the animation. Additionally, we will make the timeline
available to the rest of the component via data
.
Now GSAP will restart the animation when it completes. See it in action here:
đ„ Adding Interactivity
We now have a solid foundation to start integrating some interactivity. As an example, lets add a button to randomly update the logo in the bubble.
To do this we will have to do a few things
- Move the image source to a Vue data attribute
- Create an array of images to sample from
- Create a method to get a random logo
- Add a button to change the logo
With this code in place, we can now use the button to update the element we are animating, while its being animated!
We could even make use of our onComplete
function to get a random logo when the animation resets:
I use a very similar technique to the above to achieve this animation on the homepage, where the next track in the track list is selected from an array and then appended to the list.
đ„ Wrapping Up
I hope that was interesting! My hope is that you now have a few ideas for how to add a bit of animation and interactivity to you own sites. Iâm really glad I got to learn GSAP and to discover how powerful and easy it is. I have been using Vue.js for a little while now and am equally happy, it is very approachable while still being very powerful and flexible.
If you have any questions or find anything wrong in my code please do let me know in the comments!
Share music on you Slack team?
Check out: Daily Fire â a Slack app for every music lover
Peace, Love & đ„
đ Read this story later in Journal.
đ Wake up every Sunday morning to the weekâs most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >