Make writing a habit together! This is the 13th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

The GreenSock Animation platform (GSAP) can animate everything that JavaScript can manipulate (CSS properties, SVG, React, Canvas, generic objects, etc.) while addressing compatibility issues across browsers and being extremely fast (20 times faster than jQuery). About 10 million sites and many major brands use GSAP.

The animation actually changes the element’s properties many times per second, and the elements appear to be moving, such as fading in and out, rotating, moving, etc. The GSAP captures a start value and an end value and interpolates between them 60 times per second.

Technically, GSAP should be called the “GreenSock Attribute Manipulator” (GSPM).

Summary of the article

This paper consists of the following parts:

  • How to set up a project
  • Write the tag
  • Introduction of GSAP
  • Add an animation to the page
  • conclusion

How to set up a project

Before you start building your target web page, you need to prepare a few things.

In this section, you will:

  • Set the directory where your project resides.
  • Set up the GSAP and TailwindCSS.
  • Import fonts.
  • Set up a simple development server.

How do I set the project directory

Start by running the following command in your terminal:

mkdir gsap-landing
cd gsap-landing
mkdir build src
mkdir build/assets build/static
Copy the code

This code should create a folder tree as follows:

Project directory structure

How do I set up GSAP

To install GSAP, create a file named index.html in build and put the following code into it:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta  name="viewport" content="width=device-width, Initial - scale = 1.0 "> < script SRC =" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js "> < / script > <title>Orfice</title> </head> <body> </body> </html>Copy the code

This will create a basic HTML document and import it into GSAP via the script tag in the header.

How do I set up TailwindCSS

To install TailwindCSS, make sure you are in the root directory of your project, and then run the following command from your terminal:

npm install tailwindcss
npx tailwind init
Copy the code

This should create three new files in your project root: package.json, package-lock.json, and tailwind.config.js.

SRC Next, create a file input.css in a folder named input.css and place the following code in it:

@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Go back to the project root directory and replace the contents with tailwind.config.js as follows:

module.exports = {
  content: [
  "./build/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Copy the code

After that, open your package.json file and replace its contents with the following:

{ "scripts": { "build-css": "npx tailwindcss -i ./src/input.css -o ./build/static/output.css --watch" }, "dependencies": { "tailwindcss": "^ 3.0.23}}"Copy the code

Now, open your terminal and run the following command:

npm run build-css
Copy the code

This command is responsible for creating and updating the file: build/static/output.css, which is where your login page style is, so you should let it run in your terminal window until you finish this tutorial.

Next, link the CSS to your login page by adding the following code above the script tag imported into GSAP:

<link rel="stylesheet" href="static/output.css">
Copy the code

The TailwindCSS setup ends here.

How to Import fonts

Replace the header with build/index.html with the following:

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < link rel =" preconnect "href =" https://fonts.googleapis.com "> < link rel =" preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400; 500; 600; 700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="static/output.css"> <script SRC = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js" > < / script > < title > Orfice < / title > < / head >Copy the code

Now apply the font to your CSS.

Open SRC /input.css and add the following code to the end:

@layer base { body { @apply overflow-hidden h-screen; font-family: 'Be Vietnam Pro', sans-serif; }}Copy the code

Setting up the server

To set up your development server, open a new terminal window, navigate to your project root directory, and then run the following code:

npm install --save-dev live-server
Copy the code

That’s all you need to do! To start the server, run the following command in your terminal:

live-server build
Copy the code

As long as the live-server command is running, it builds /index.html at localhost:8080 and automatically refreshes the page when you make changes to the project.