Article summary
Have you ever wondered how to create smooth animations for your Three.js web app? This can be a tedious process, but luckily we have a handy tool called GSAP.
Here is a quick example of an animation I created using that tool.
Cool right? Below, I will discuss how I used GSAP to create these animations. But first…
What is GSAP?
GSAP is a high-performance and robust Javascript animation library that allows the user to create and animate anything written in Javascript (CSS properties, canvas library objects, SVG, React, Vue, Angular, generic objects, etc.). Instead of writing complicated CSS files to animate an object, GSAP allows you to animate an object with a single function call and translates it to run across multiple different browser platforms. This makes it extremely easy to create animations and simplifies the entire process. Sounds great, doesn’t it? Let’s see how to use it.
How to Use It
First, let’s start by adding GSAP to your project. In your project directory, open a terminal and run either of the following:
npm install gsap
yarn add gsap
Once you’ve installed GSAP, you can import it into your project file:
import { gsap } from "gsap";
Once imported, we can start using GSAP to create our animations! For the most basic implementation, we will use the gsap.to() function. To create the animation, we will need to pass three things into the function. Those are the object you want to animate, the value you want GSAP to animate your object to from its current position, and the duration of the animation.
gsap.to(object, {property: value, duration: value})
Let’s put GSAP to use. Going back to my example, it is super simple to animate the transition of the moon. With one line of code, we can animate the moon to smoothly move from its position off of the screen to the x coordinate of 0 in 2 seconds. The code is as follows:
gsap.to(moon.position, { duration: 2, x: 0 });
This single line produces the following animation.
Looks great, doesn’t it? We can take it a step further by triggering another animation after the current one is finished. To do so we can add a prop called delay. This will tell the animation to wait a specified amount of seconds before starting the animation. Here we tell the animation to wait 2 seconds and then animate the moon’s z position to change to 4. Let’s try that.
gsap.to(moon.position, { duration: 2, x: 0 });
// Add second animation that starts after 2 seconds have passed.
gsap.to(moon.position, { duration: 2, z: 4, delay: 2 });
More Examples
It’s as simple as that. GSAP allows us to create this beautiful animation with only two lines of code. This eliminates the need to deal with the complicated logic behind animating objects. The beauty of this tool is that you can pretty much animate any property on the object. Here are just a couple of examples to get you started. Have fun!
// Animate the x, y and z positions of the object
gsap.to(moon.position, { duration: 2, x: 1 });
gsap.to(moon.position, { duration: 2, y: 1 });
gsap.to(moon.position, { duration: 2, z: 1 });
// Animate the x, y and z scale/size of the object
gsap.to(moon.scale, { duration: 2, x: 2 });
gsap.to(moon.scale, { duration: 2, y: 2 });
gsap.to(moon.scale, { duration: 2, z: 2 });
// Animate the x, y and z rotation of the object
gsap.to(moon.rotation, { duration: 2, x: 3});
gsap.to(moon.rotation, { duration: 2, y: 3});
gsap.to(moon.rotation, { duration: 2, z: 3});
// Animate the opacity of the object
gsap.to(moon.material, { duration: 2, opacity: 0});