Membuat Tween Multiple Property dengan Greensock

Saat ini telah berkembang banyak sekali website yang menerapkan animasi interaktif pada tampilan home mereka agar dapat memberikan kesan unik pada pengunjung website, dengan begitu berkembang pula teknologi animasi yang ditujukan untuk website. Seperti pada artikel sebelumnya saya memberikan pembahasan tentang cara membuat tween sederhana menggunakan greensock.

Greensock merupakan framework javascript yang sangat popular untuk pembuatan animasi pada HTML5. Greensock sendiri memiliki fitur seperti draggable, klik, scroll dan event-event lainnya yang sangat berguna untuk membuat animasi interaktif pada sebuah website.

Hampir sama pada artikel sebelumnya, disini kita sedikit memberikan custom terhadap animasi yang akan berjalan..

Pertama-tama kita akan buat struktur HTML dengan menghubungkan javascript greensock ke dalamnya seperti ini

<!DOCTYPE html>
<html>
<head>
    <title>GreenSock</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
</body>
</html>

 

Pada kode diatas kita menggunakan javascript TweenMax yang dimiliki oleh GreenSock yang kita gunakan secara online.

Selanjutnya kita akan memberikan sebuah div untuk menjadi objek yang akan kita gunakan nanti. Saya buat div dengan id #logo seperti ini

<div id="logo"> </div>

Dan kita akan memberikan css seperti berikut

#logo {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: lime;
    border-bottom: 10px solid #000000
}

 

Lalu kita akan mencoba memanggil fungsi javascript dari greensock TweenMax dengan baris kode berikut

var logo = document.getElementById("logo");
    TweenLite.to(logo, 2, {
      left: "500px",
      backgroundColor: "#800000",
      borderBottomColor: "#00FF00",
      color: "black"
    });

Dengan fungsi diatas kita membuat variabel logo yang di ambil dari id #logo pada div yang kita buat sebelumnya, lalu kita juga menggunakan fungsi TweenLite dari greensock yang diarahkan kepada variabel logo, dan memberikan waktu animasi selama 2 detik.

Disini kita menambahkan beberapa atribut untuk mengubah warna pada jalannya animasi tween dengan memberikan left 500px untuk menggeser objek ke kanan, lalu ada backgroundColor, dan juga borderBottomColor.

Dengan begitu animasi yang akan berjalan saat halaman dibuka akan menggerakkan kotak hijau ke kanan sejauh 500px, dan mengubah

Demikian artikel kali ini yang membahas tentang cara membuat tween sederhana menggunakan greensock.

29 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat