Membuat Tween Multiple Property dengan Greensock

29/05/2017    Maykhel David    1139     Website

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.

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