Membuat Draggable Comtent dengan Greensock

Pembuatan animasi menggunakan javascript sudah selayaknya dipelajari mulai saat ini, Kenapa? Berdasarkan perkembangan website yang ada saat ini memang sangatlah banyak website yang menawarkan kesan interaktif dan menarik. Ditinggalnya animasi flash untuk website juga salah satu alasan mengapa kita perlu belajar mengenai pembuatan animasi menggunakan javascript.

Baiklah teman-teman, salah satu fitur dari GSAP adalah memberikan fungsi draggable, atau konten yang  bisa di drag menggunakan kursoor. Seperti pada janji saya di artikel sebelumnya tentang pengenalan lebih jauh tentang GSAP, disini kita akan membahas satu fungsi yang ada pada GSAP, yaitu draggable, dimana nanti kita akan memberikan fungsi drag pada sebuah objek HTML.

Pertama kita harus menghubungkan Javascript GSAP yang diperlukan

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://www.greensock.com/js/src/plugins/ThrowPropsPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/utils/Draggable.min.js"></script>

Lalu kita akan buat struktur HTML seperti berikut untuk membuat sebuah container dengan kotak di dalamnya

<h2>Tarik Kotak Hijau Dibawah</h2>

<div id="container">
  <div id="box">
  </div>
</div>

Dan juga CSS nya seperti berikut

body{
  background-color:#555;
  margin:20px;
  color:white;
}

h2 {
  font-size:20px;
}
#container{
  background-color:black;
  width:1000px;
  height:400px;
}

#box {
  position:absolute;
  padding:6px;
  width:125px;
  background-color:green;
}

Dengan begitu kita sudah memiliki sebuah kotak hijau yang siap diberikan fungsi draggable

Selanjutnya kita akan membuat fungsi draggable dengan baris javascript berikut

Draggable.create("#box", {
  type:"x,y",
  throwProps:true,
  edgeResistance:0.5,
  bounds:"#container",
});

Berikut penjelasan dari baris javascript diatas

Type: merupakan penentu gerakan drag yang diperbolehkan, disini kita memakai sumbu x dan y yang berarti bisa di gerakan ke segala arah

throwProps: merupakan property untuk mengaktifkan fungsi throw (lempar) saat objek di drag dengan pemberian nilai true atau false

edgeResistance: adalah property untuk memungkinkan kita mendrag objek keluar penampungnya namun akan berbalik lagi ke dalam.

Bounds: adalah property yang digunakan untuk menentukan penampung dari objek draggable

Dari penerapan fungsi javascript diatas kita sudah bisa membuat sebuah fungsi draggable dengan mudah menggunakan framework Greensock dengan komponen TweenMax dan plugin Draggable yang sudah disediakan. Demikian artikel kali ini semoga bermanfaat.