Cara Membuat Tween Sederhana Menggunakan GreenSock

29/05/2017    Maykhel David    2180    Website

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.
Masih ingatkah kalian beberapa tahun lalu kita masih sangat jarang menemukan website menggunakan animasi canvas HTML5, hampir semua animasi interaktif yang ada memang dibuat dengan memanfaatkan platform flash, dan sebagian hanya menerapkan gambar bergerak menggunakan animasi gif. Seiring berjalannya waktu, animasi berbasis flash sudah mulai ditinggalkan Karena memiliki celah keamanan yang cukup berbahaya dan pada akhirnya tidak dikembangkan lagi.


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.

Contohnya kali ini saya akan memberikan sedikit tutorial menggunakan framework animasi GreenSock.

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;
        }

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"});

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,  serta menambahkan atribut css left sebesar 500px.

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

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

jQuery, Javascript, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow