Tutorial Dasar GSAP: Membuat Animasi Pertama dengan GSAP

Name: Tutorial Dasar GSAP: Membuat Animasi Pertama dengan GSAP
Brand: BuildWithAngga
Rating: 4.8 (9567 reviews)

November 19, 2025

•

Frontend Development

Tutorial Dasar GSAP: Membuat Animasi Pertama dengan GSAP

Halo! Setelah kamu membaca pengantar tentang GSAP dan tahu betapa powerful-nya library ini, sekarang saatnya untuk hands-on dan membuat animasi pertamamu dengan GSAP. Jangan khawatir kalau kamu masih pemula, tutorial ini akan membimbing kamu step-by-step dari nol hingga bisa membuat animasi yang smooth dan menarik.

Di artikel ini, kamu akan belajar cara menggunakan method dasar GSAP seperti gsap.to(), gsap.from(), dan gsap.fromTo(). Kamu juga akan belajar cara mengontrol durasi, menggunakan easing functions untuk membuat animasi terasa lebih natural, dan membuat beberapa elemen beranimasi secara berurutan dengan stagger. Siap? Mari kita mulai!

Persiapan: Setup Project Sederhana

Sebelum kita mulai coding animasi, mari kita setup project sederhana terlebih dahulu. Kamu hanya butuh satu file HTML dengan sedikit CSS untuk styling.

Buat file index.html dan copy-paste kode berikut:

<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial Dasar GSAP</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            color: white;
            text-align: center;
            margin-bottom: 40px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #00d4ff;
            margin: 20px 0;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 18px;
        }
        .card {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        button {
            background: #00d4ff;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px 5px;
        }
        button:hover {
            background: #00b8e6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Tutorial Dasar GSAP</h1>
        
        <div class="card">
            <h3>Contoh 1: gsap.to()</h3>
            <div class="box" id="box1">Box 1</div>
            <button onclick="animateTo()">Animate To</button>
        </div>
        
        <div class="card">
            <h3>Contoh 2: gsap.from()</h3>
            <div class="box" id="box2">Box 2</div>
            <button onclick="animateFrom()">Animate From</button>
        </div>
        
        <div class="card">
            <h3>Contoh 3: gsap.fromTo()</h3>
            <div class="box" id="box3">Box 3</div>
            <button onclick="animateFromTo()">Animate FromTo</button>
        </div>
        
        <div class="card">
            <h3>Contoh 4: Stagger Animation</h3>
            <div class="box stagger-box">1</div>
            <div class="box stagger-box">2</div>
            <div class="box stagger-box">3</div>
            <div class="box stagger-box">4</div>
            <button onclick="animateStagger()">Animate Stagger</button>
        </div>
    </div>

    *<!-- Load GSAP dari CDN -->*
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js>"></script>
    <script>
        // JavaScript code akan kita tulis di sini
    </script>
</body>
</html>

Sekarang kamu sudah punya struktur HTML dasar dengan beberapa box yang siap untuk di-animate. Selanjutnya, kita akan menulis JavaScript code untuk membuat animasi.

Method 1: gsap.to() - Animasi dari State Sekarang ke Target

Method gsap.to() adalah method yang paling sering digunakan di GSAP. Method ini akan menganimasikan elemen dari state sekarang ke target state yang kamu define.

Sintaks dasar:

gsap.to(target, { properties });

Mari kita buat animasi pertama. Tambahkan function ini di dalam tag <script>:

function animateTo() {
    gsap.to("#box1", {
        x: 300,              *// Gerakkan 300px ke kanan*
        rotation: 360,       *// Putar 360 derajat*
        duration: 1,         *// Durasi 1 detik*
        backgroundColor: "#ff6b6b",  *// Ubah warna background*
        ease: "power2.out"   *// Easing function untuk smooth effect*
    });
}

Penjelasan:

"#box1" adalah target selector (bisa pakai CSS selector seperti class, id, atau tag)
x: 300 akan menggerakkan box 300 pixels ke kanan (transformasi translateX)
rotation: 360 akan memutar box 360 derajat
duration: 1 adalah durasi animasi dalam detik
backgroundColor akan mengubah warna background box
ease adalah easing function yang membuat animasi terasa smooth dan natural

Sekarang coba buka file HTML di browser dan klik tombol "Animate To". Box akan bergerak ke kanan sambil berputar dan berubah warna!

Method 2: gsap.from() - Animasi dari Target ke State Sekarang

Method gsap.from() adalah kebalikan dari gsap.to(). Method ini akan menganimasikan elemen dari state yang kamu define ke state sekarang.

Ini sangat berguna untuk membuat entrance animations, seperti elemen yang muncul dari luar layar atau fade in dari transparent.

function animateFrom() {
    gsap.from("#box2", {
        x: -300,             *// Mulai dari 300px di sebelah kiri*
        opacity: 0,          *// Mulai dari transparan*
        scale: 0,            *// Mulai dari ukuran 0 (tidak terlihat)*
        duration: 1.5,       *// Durasi 1.5 detik*
        ease: "back.out(1.7)" *// Easing dengan overshoot effect*
    });
}

Penjelasan:

Box akan mulai dari posisi 300px di sebelah kiri (x: -300)
Box akan mulai transparan (opacity: 0)
Box akan mulai dengan ukuran 0 (scale: 0)
Kemudian semua properties akan beranimasi menuju ke state akhir box yang terlihat di HTML

Coba klik tombol "Animate From" dan lihat bagaimana box muncul dari kiri dengan effect yang smooth!

Method 3: gsap.fromTo() - Kontrol Penuh State Awal dan Akhir

Method gsap.fromTo() memberikan kontrol penuh karena kamu bisa define both starting state and ending state.

Sintaks dasar:

gsap.fromTo(target, { fromVars }, { toVars });

function animateFromTo() {
    gsap.fromTo("#box3", 
        {
            *// State awal*
            x: -200,
            y: -100,
            rotation: 0,
            backgroundColor: "#ff9f1c"
        },
        {
            *// State akhir*
            x: 200,
            y: 100,
            rotation: 720,
            backgroundColor: "#2ec4b6",
            duration: 2,
            ease: "elastic.out(1, 0.3)"
        }
    );
}

Penjelasan:

Object pertama { x: -200, y: -100, ... } adalah starting values
Object kedua { x: 200, y: 100, ... } adalah ending values
Animasi akan bergerak dari state pertama ke state kedua
elastic.out(1, 0.3) memberikan bouncy effect yang fun

Coba klik "Animate FromTo" dan lihat box bergerak diagonal dengan effect elastic yang bouncy!

Properti Animasi yang Sering Digunakan

Berikut adalah properti-properti yang paling sering kamu gunakan dalam animasi GSAP:

Transform Properties:

x - Horizontal position (translateX)
y - Vertical position (translateY)
rotation - Rotasi dalam derajat
scale - Ukuran (1 = normal, 0.5 = setengah, 2 = double)
scaleX / scaleY - Scale horizontal atau vertical saja

Visual Properties:

opacity - Transparansi (0 = invisible, 1 = fully visible)
backgroundColor - Warna background
color - Warna text

Special Properties:

duration - Durasi animasi (dalam detik)
delay - Delay sebelum animasi mulai (dalam detik)
ease - Easing function untuk smooth motion
repeat - Berapa kali animasi diulang (-1 = infinite loop)
yoyo - Jika true, animasi akan reverse bolak-balik
stagger - Delay antar elemen (untuk multiple targets)

Easing Functions: Membuat Animasi Terasa Natural

Easing functions adalah yang membuat animasi terasa smooth dan natural, bukan linear dan kaku. GSAP punya banyak easing options, tapi ini adalah yang paling sering digunakan:

Power Eases (Paling Umum):

"power1.out" - Default GSAP, smooth dan subtle
"power2.out" - Lebih pronounced deceleration
"power3.out" - Strong deceleration
"power4.out" - Very strong deceleration

Special Eases (Fun Effects):

"back.out(1.7)" - Overshoot effect
"elastic.out(1, 0.3)" - Bouncy/elastic effect
"bounce.out" - Bouncing ball effect

Ease Types:

.in - Slow start, fast end (contoh: "power2.in")
.out - Fast start, slow end (contoh: "power2.out") ← Paling bagus untuk UI
.inOut - Slow start dan slow end (contoh: "power2.inOut")

Best Practice: Untuk UI animations, gunakan .out eases karena mereka fast to start (UI terasa responsive) dan slow to end (natural friction).

*// Contoh berbagai easing*
gsap.to(".box", { x: 300, duration: 1, ease: "power2.out" });    *// Smooth*
gsap.to(".box", { x: 300, duration: 1, ease: "back.out(1.7)" }); *// Overshoot*
gsap.to(".box", { x: 300, duration: 1, ease: "bounce.out" });    *// Bouncy*
gsap.to(".box", { x: 300, duration: 1, ease: "none" });          *// Linear (kaku)*

Stagger: Animasi Beberapa Elemen Secara Berurutan

Stagger adalah fitur yang sangat powerful untuk menganimasikan multiple elements dengan delay antar mereka. Ini menciptakan effect yang cohesive dan professional.

function animateStagger() {
    gsap.from(".stagger-box", {
        y: -100,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,         *// Delay 0.2 detik antar elemen*
        ease: "back.out(1.7)"
    });
}

Penjelasan:

Semua box dengan class .stagger-box akan di-animate
stagger: 0.2 artinya setiap box akan mulai 0.2 detik setelah box sebelumnya
Ini menciptakan cascading effect yang terlihat sangat smooth

Stagger Advanced:

*// Stagger dengan options lebih detail*
gsap.from(".stagger-box", {
    y: -100,
    opacity: 0,
    duration: 0.8,
    stagger: {
        each: 0.2,        *// Delay antar elemen*
        from: "center",   *// Mulai dari tengah (options: start, center, end, edges)*
        ease: "power2.inOut"
    }
});

Coba klik "Animate Stagger" dan lihat box-box muncul satu per satu dengan timing yang perfect!

Repeat dan Yoyo: Animasi yang Loop

Kadang kamu ingin animasi repeat atau loop. GSAP punya properties untuk ini:

*// Animasi yang repeat 3 kali*
gsap.to(".box", {
    x: 300,
    duration: 1,
    repeat: 3,              *// Repeat 3 kali*
    ease: "power2.inOut"
});

*// Animasi yang loop forever*
gsap.to(".box", {
    rotation: 360,
    duration: 2,
    repeat: -1,             *// -1 = infinite loop*
    ease: "none"            *// Linear rotation*
});

*// Animasi yoyo (bolak-balik)*
gsap.to(".box", {
    x: 300,
    duration: 1,
    repeat: -1,
    yoyo: true,             *// Reverse animation setelah complete*
    ease: "power2.inOut"
});

Callback Functions: Eksekusi Code saat Animasi

GSAP mendukung callback functions untuk execute code di various points dalam animasi:

gsap.to(".box", {
    x: 300,
    duration: 1,
    onStart: function() {
        console.log("Animasi dimulai!");
    },
    onComplete: function() {
        console.log("Animasi selesai!");
        *// Bisa trigger animasi lain atau update UI*
    },
    onUpdate: function() {
        *// Dipanggil setiap frame selama animasi*
    }
});

Contoh Lengkap: Membuat Card Entrance Animation

Mari kita gabungkan semua yang sudah dipelajari untuk membuat entrance animation yang professional:

*// Card entrance animation*
gsap.from(".card", {
    y: 50,
    opacity: 0,
    duration: 0.8,
    stagger: 0.15,
    ease: "power2.out",
    onComplete: function() {
        console.log("Semua card sudah muncul!");
    }
});

*// Heading animation*
gsap.from("h1", {
    y: -50,
    opacity: 0,
    duration: 1,
    ease: "back.out(1.7)"
});

Tambahkan code ini di akhir tag <script> (di luar semua functions) agar animasi langsung jalan saat page load.

Tips dan Best Practices

1. Mulai Simple, Gradually Increase Complexity

Jangan langsung bikin animasi yang complex. Mulai dengan simple animations seperti fade in/out, slide in/out. Setelah comfortable, baru explore yang lebih advanced.

2. Gunakan Easing yang Tepat

UI elements: power2.out atau power1.out
Fun/playful elements: back.out atau elastic.out
Continuous loops: none (linear)

3. Perhatikan Performance

Animasikan properties yang GPU-accelerated: x, y, rotation, scale, opacity
Hindari animasi width, height, top, left karena trigger layout reflow

4. Durasi yang Reasonable

Fast UI interactions: 0.3 - 0.5 detik
Medium animations: 0.8 - 1.2 detik
Dramatic effects: 1.5 - 2 detik
Jangan terlalu lama atau user akan bosan!

5. Mobile Consideration

Animasi di mobile harus lebih subtle dan faster
Test di real devices, bukan hanya desktop

Latihan untuk Kamu

Sekarang giliran kamu untuk practice! Coba buat animasi-animasi berikut:

Button Hover Effect: Buat button yang scale up dan change color saat di-hover
Loading Spinner: Buat box yang rotate infinite dengan repeat: -1
Notification Popup: Buat notifikasi yang slide in dari kanan atas
Image Gallery: Buat gallery dengan images yang fade in dengan stagger
Form Validation: Buat input field yang shake kalau ada error (gunakan x property dengan multiple values)

Keseluruhan Code

<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tutorial Dasar GSAP</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      h1 {
        color: white;
        text-align: center;
        margin-bottom: 40px;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #00d4ff;
        margin: 20px 0;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 18px;
      }
      .card {
        background: white;
        padding: 20px;
        margin: 20px 0;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }
      button {
        background: #00d4ff;
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        margin: 10px 5px;
      }
      button:hover {
        background: #00b8e6;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Tutorial Dasar GSAP</h1>

      <div class="card">
        <h3>Contoh 1: gsap.to()</h3>
        <div class="box" id="box1">Box 1</div>
        <button onclick="animateTo()">Animate To</button>
      </div>

      <div class="card">
        <h3>Contoh 2: gsap.from()</h3>
        <div class="box" id="box2">Box 2</div>
        <button onclick="animateFrom()">Animate From</button>
      </div>

      <div class="card">
        <h3>Contoh 3: gsap.fromTo()</h3>
        <div class="box" id="box3">Box 3</div>
        <button onclick="animateFromTo()">Animate FromTo</button>
      </div>

      <div class="card">
        <h3>Contoh 4: Stagger Animation</h3>
        <div class="box stagger-box">1</div>
        <div class="box stagger-box">2</div>
        <div class="box stagger-box">3</div>
        <div class="box stagger-box">4</div>
        <button onclick="animateStagger()">Animate Stagger</button>
      </div>
    </div>

    <!-- Load GSAP dari CDN -->
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js>"></script>
    <script>
      function animateTo() {
        gsap.to("#box1", {
          x: 300, // Gerakkan 300px ke kanan
          rotation: 360, // Putar 360 derajat
          duration: 1, // Durasi 1 detik
          backgroundColor: "#ff6b6b", // Ubah warna background
          ease: "power2.out", // Easing function untuk smooth effect
        });
      }
      function animateFrom() {
        gsap.from("#box2", {
          x: -300, // Mulai dari 300px di sebelah kiri
          opacity: 0, // Mulai dari transparan
          scale: 0, // Mulai dari ukuran 0 (tidak terlihat)
          duration: 1.5, // Durasi 1.5 detik
          ease: "back.out(1.7)", // Easing dengan overshoot effect
        });
      }
      function animateFromTo() {
        gsap.fromTo(
          "#box3",
          {
            // State awal
            x: -200,
            y: -100,
            rotation: 0,
            backgroundColor: "#ff9f1c",
          },
          {
            // State akhir
            x: 200,
            y: 100,
            rotation: 720,
            backgroundColor: "#2ec4b6",
            duration: 2,
            ease: "elastic.out(1, 0.3)",
          }
        );
      }
      function animateStagger() {
        gsap.from(".stagger-box", {
          y: -100,
          opacity: 0,
          duration: 0.8,
          stagger: 0.2, // Delay 0.2 detik antar elemen
          ease: "back.out(1.7)",
        });
      }

      //   // Animasi yang repeat 3 kali
      //   gsap.to(".box", {
      //     x: 300,
      //     duration: 1,
      //     repeat: 3, // Repeat 3 kali
      //     ease: "power2.inOut",
      //   });

      //   // Animasi yang loop forever
      //   gsap.to(".box", {
      //     rotation: 360,
      //     duration: 2,
      //     repeat: -1, // -1 = infinite loop
      //     ease: "none", // Linear rotation
      //   });

      //   // Animasi yoyo (bolak-balik)
      //   gsap.to(".box", {
      //     x: 300,
      //     duration: 1,
      //     repeat: -1,
      //     yoyo: true, // Reverse animation setelah complete
      //     ease: "power2.inOut",
      //   });

      gsap.to(".box", {
        x: 300,
        duration: 1,
        onStart: function () {
          console.log("Animasi dimulai!");
        },
        onComplete: function () {
          console.log("Animasi selesai!");
          // Bisa trigger animasi lain atau update UI
        },
        onUpdate: function () {
          // Dipanggil setiap frame selama animasi
        },
      });

      // Card entrance animation
      gsap.from(".card", {
        y: 50,
        opacity: 0,
        duration: 0.8,
        stagger: 0.15,
        ease: "power2.out",
        onComplete: function () {
          console.log("Semua card sudah muncul!");
        },
      });

      // Heading animation
      gsap.from("h1", {
        y: -50,
        opacity: 0,
        duration: 1,
        ease: "back.out(1.7)",
      });
    </script>
  </body>
</html>

Kesimpulan

Selamat! Kamu sudah belajar fundamental dari GSAP animations. Kamu sekarang tahu cara menggunakan gsap.to(), gsap.from(), dan gsap.fromTo() untuk membuat berbagai jenis animasi. Kamu juga sudah paham tentang easing functions, stagger, dan various properties yang bisa di-animate.

Yang paling penting adalah practice. Semakin banyak kamu eksperimen dengan GSAP, semakin comfortable kamu akan merasa. Jangan takut untuk try different easing functions dan combinations of properties.

Di tutorial selanjutnya, kita akan belajar tentang GSAP Timeline untuk mengatur complex animation sequences dengan mudah. Timeline adalah game-changer yang membuat kamu bisa create professional-level animations!

Created by Arief Taufik Rahman, November 19, 2025

Pelajari Selengkapnya

Mastering Figma: User-Interface Design Animation

(1,141)

Career Preparation

Bangun Karir Impian.
Dibantu Expert, Gratis 🤩

Stop buang waktu browsing sana-sini karena
di BuildWithAngga sudah tersedia arahan pasti

Chat ke CS Karir HandBook

Content Editor

Taufan Fatahillah

Taufan Fatahillah, an expert content writer at BuildWithAngga, continually acquires valuable knowledge in web technology, UI UX design, SEO, and business. This knowledge is shared freely with the extensive community in Indonesia.

Tutorial Dasar GSAP: Membuat Animasi Pertama dengan GSAP

Persiapan: Setup Project Sederhana

Method 1: gsap.to() - Animasi dari State Sekarang ke Target

Method 2: gsap.from() - Animasi dari Target ke State Sekarang

Method 3: gsap.fromTo() - Kontrol Penuh State Awal dan Akhir

Properti Animasi yang Sering Digunakan

Easing Functions: Membuat Animasi Terasa Natural

Stagger: Animasi Beberapa Elemen Secara Berurutan

Repeat dan Yoyo: Animasi yang Loop

Callback Functions: Eksekusi Code saat Animasi

Contoh Lengkap: Membuat Card Entrance Animation

Tips dan Best Practices

Latihan untuk Kamu

Keseluruhan Code

Kesimpulan

Pelajari Selengkapnya

Bangun Karir Impian.
Dibantu Expert, Gratis 🤩

Content Editor

Explore More

Explore More