Getting Started with GSAP

GSAP (GreenSock Animation Platform) is a powerful library for creating high-performance animations. It is widely used due to its robustness and flexibility.

Installation

You can include GSAP in your project using npm:

npm install gsap

Or you can use a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

Basic Animation

Here's a simple example of using GSAP to animate an element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Animation</title>
</head>
<body>
    <div id="box" style="width:100px; height:100px; background-color:red;"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
    <script>
        gsap.to("#box", {x: 100, duration: 1});
    </script>
</body>
</html>

Advanced Animation

GSAP provides various features for advanced animations, such as timelines, stagger, and easing.

  • Timelines: Timelines allow you to sequence animations. Here's an example:
const name = "John";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Output: Hello, John!
  • Stagger: Stagger allows you to animate multiple elements with a delay between each. Here's an example:
gsap.to(".box", {x: 100, duration: 1, stagger: 0.2});
  • Easing: GSAP provides a variety of easing options to make animations look more natural. Here's an example:
gsap.to("#box", {x: 100, duration: 1, ease: "bounce"});

For more details and examples, check out the GSAP documentation.

results matching ""

    No results matching ""