Animation is one of the most important aspects of modern web design. It is a functional and effective way to improve user experience. While CSS (I wrote about getting started with CSS animation in a previous post) is very useful in creating cool animations, it can get really exhausting and time-consuming to create complex ones. This is where JavaScript comes in.
In this post we'll be focusing on how to get started with animating interfaces using a JavaScript library called GSAP in our Vue app.
What is GSAP?
GreenSock Animation Platform (GSAP) is a powerful, robust, high-speed and lightweight JavaScript library that can be used to create performant and engaging animations. It animates anything JavaScript can touch which includes CSS properties and SVGs while working around browser inconsistencies.
Need I say more? 😏
Setup
The first step to using GSAP in your Vue app is by including it in your project. While there are a number of ways to do this, I prefer to install GSAP using NPM or Yarn. You can check out the other installation methods in the GSAP docs here.
For npm installation, in your terminal, type the following command:
npm install gsap
For yarn installation, type the following command:
yarn add gsap
At the top of the file you want to use GSAP in, import GSAP by adding this:
import { gsap } from 'gsap';
Now you're ready to use GSAP. 🥳
GSAP Concepts
We'll be focusing on a number of concepts that are fundamental to creating animations with GSAP and they are:
Tween
A Tween, simply put, is what does all the animation work. It is a single movement in an animation caused by a change in properties. It is similar to keyframes in CSS. It follows this syntax:
gsap.method('element', duration, vars)
method: This refers to the GSAP method you'd like to Tween with.
element: This is the element that we want to animate. It can be a simple variable or an array if we want to animate multiple elements.
duration: This represents the duration of the animation, it is defined in seconds.
vars: This is an object with key/value pairs of different properties that we want to change over the duration. They can be CSS properties, but it's important to note that they should be written in in camelCase format. That is, padding-bottom as paddingBottom.
Exploring GSAP methods
Methods are used to define the start and final values of an animation.There are numerous methods to create animations using GSAP. We’ll be focusing on some of the common ones such as gsap.to(), gsap.from() and gsap.fromTo().
gsap.to()
This method animates the element from their current/default values to the values specified in the object parameter (vars).
gsap.to('.block', 3, {
x: 200,
borderRadius: '50%',
backgroundColor: 'orange',
});
The above code will move an element with the class name block 200px along its x-axis, using the CSS property translateX which is being represented simply here by x, in three(3) seconds while updating its other CSS properties to have a border-radius of 50% and a background-color of orange.
gsap.from()
This method animates the element from the values specified in the object parameter (vars) to the current/default values. It acts as the reverse of the to method.
gsap.from('.circle', 3, {
y: 200,
borderRadius: '50%',
backgroundColor: 'orange',
});
The above code will animate an element with the class name circle along its y-axis from having a border-radius of 50% and a background-color of orange to its default values.
gsap.fromTo()
This method allows you to specify both the starting and final values. This is done by using two objects which represent these values respectively. It is a combination of both the from() and to() methods.
gsap.fromTo('.block-circle', 3, {
borderRadius: '8px',
backgroundColor: 'purple',
},
{
borderRadius: '50%',
backgroundColor: 'orange',
}
);
The above code will animate an element with the class name block-circle from having a border-radius of 8px and a background-color of purple to a border-radius of 50% and a background-color of orange.
Exploring GSAP vars properties
It is also important to note that other than CSS properties, there are other properties that can go inside the vars object parameter and some of them are:
delay: The amount of delay in seconds before the animation should begin.
paused: This is a Boolean and if true, the animation will pause itself immediately upon creation.
repeat: The number of times that the animation should repeat after it plays for the first time.
yoyo: This is a Boolean and if true, the tween appears to go back and forth (forward then backward).
Timeline
A Timeline is a container for multiple Tweens. Timeline lets you chain Tweens together. With a Timeline, all the Tweens are executed by default one after the other, unless set otherwise, with no need to use delays on the individual Tweens. Making use of Timeline is an easier method as using delays for sequencing could make your animation harder to maintain, especially in more complex animations.
A Timeline is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without Timelines, building complex sequences would be far more cumbersome because you'd need to use a delay for every animation. - GSAP Timeline Docs
A Timeline can be created using the following format:
const timeline = gsap.timeline();
timeline
.from('element', {})
.to('element', {});
Plugins
GSAP makes available plugins that can be used to create complex and exciting animations with a few lines of intuitive code. Some of the most popular GSAP plugins include: ScrollTrigger, DrawSVGPlugin, and MorphSVGPlugin amongst others. For a full list of official GSAP plugins, check out the plugins page.
In order to make use of a GSAP plugin, you will need to register it to the GSAP core by using the format below at the top of the file you want to use the plugin:
import { PluginName } from 'gsap/PluginName';
gsap.registerPlugin(PluginName);
In this post we'll be focusing on a powerful GSAP plugin called ScrollTrigger. ScrollTrigger can be used to create amazing scroll-based animations with minimal code. It can also be used to trigger anything scroll-related.
The below code is used to register the ScrollTrigger plugin:
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.to('element', {
x: 200,
scrollTrigger: 'element',
})
The above code animates an element 200px on the x-axis when the element is in view once.
The ScrollTrigger plugin can be used to create a custom scroll bar like the example below amongst other mind-blowing animations.
Conclusion
In this post, we’ve covered how to get started with using GSAP to create stunning animations in your Vue app.
While GSAP has so many useful features, it can be intimidating to get started, but once you’ve the understood the basics, you'll be creating complex animations in no time.
GSAP has quite an extensive and accessible documentation that covers features not mentioned in this post and very active forums that I have personally benefitted from!
Thank you for reading and I hope you found this post helpful. 💫
