GSAP merupakan javascript library yang dapat mempermudah dalam membuat animation di website. Dengan adanya GSAP kita bisa membuat animation tanpa melalui css seperti biasanya karena nantinya kita akan menggunakan javascript.
Selain itu, GSAP tidak akan memberatkan website kalian nantinya karena performa GSAP sangat cepat. Jadi, kalian tidak usah takut jika GSAP akan memberatkan website.
GSAP juga compatible dengan browser lama maupun baru, html, svg, vue, react, angular, jquery, canvas, css dan masih banyak lagi. Jadi, kalian tidak perlu takut apakah websitenya compatible dengan gsap atau tidak.
GSAP juga bisa digunakan secara free di website kalian, tetapi kalian harus membeli license jika website memerlukan biaya untuk bisa menggunakan website kalian, contohnya seperti netflix. Atau kalian menggunakan gsap di dalam game atau product yang dijual kepada para pengguna.
Setelah kita mengetahui fitur dari gsap, selanjutnya kita akan membahas bagaimana cara menggunakan gsap di website ? Tanpa basa-basi lagi yuk ikuti langkah-langkah dibawah sini.
BACA JUGA: CARA MEMBUAT GLASSMORPHISM UI
Install GSAP
Kalian dapat menginstall gsap melalui cdn, npm dan download zip. Untuk tutorial kali ini kita akan menggunakan cdn.
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js
Nantinya link diatas akan kita masukkan kedalam tag script, tapi sebelum itu kita buat terlebih dahulu folder baru dengan nama learn-gsap. Di dalam folder tersebut kita buat 2 file yaitu index.html dan style.css
Kemudian, kita buka file index.html dan kita buat struktur text html sederhana seperti berikut.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Learn GSAP</title> <link rel="stylesheet" href="style.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> </body> </html>
Tak lupa kita masukkan link cdn ke dalam tag script dan taruh diatas penutup tag body. Terakhir, kita juga buat tag link yang nantinya mengarah ke file style.css yang kita buat tadi.
Membuat Element HTML
Setelah kita berhasil menginstall gsap menggunakan cdn, selanjutnya kita akan membuat beberapa element html seperti berikut.
<main>
<div class="content">
<h1 class="anim1"><span>Bridging the gap</span> <span>between dream</span> <span>and reality</span></h1>
<p class="anim1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio at ipsa alias modi natus excepturi?</p>
<a href="#" class="anim1" id="cta">Start Dreaming</a>
</div>
</main>
<aside>
<img class="swirl" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/swirl.png" alt="Swirl Graphic">
</aside>Di dalam tag main berisi div dengan nama class yaitu content. Nantinya kita gunakan untuk menampung beberapa text seperti h1, p, dan a.
1. tag h1 merupakan headline dari website yang kita buat. Di dalam tag h1 terdapat pemisah span untuk setiap 2 atau 3 kata.
2. tag p merupakan sub headline yang menjelaskan lebih detail dari headline website yang kita buat.
3. Untuk tag a merupakan button yang nantinya kita gunakan untuk menghilangkan dan memunculkan element ketika tombol button ditekan.
Sedangkan, di dalam tag aside terdapat tag img dengan nama class swirl.
BACA JUGA: CARA MEMBUAT SVG ANIMATION DI WEBSITE
Memberikan Style ke dalam Element HTML
Kita telah berhasil membuat element html, tetapi ketika kita membuka file index.html tampilannya masih jelek seperti gambar diatas. Oleh karena itu, kita perlu memberikan style agar tampilan website kita lebih menarik.
Pertama kita buka terlebih dahulu file style.css, selanjutnya kita copy code berikut ke dalam file style.css. Untuk penjelasannya ada dibawah.
body {
height: 100%;
margin: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto 30%;
grid-template-columns: auto 30%;
font-family: "Montserrat";
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.line {
position: absolute;
}
main {
margin-left: 20%;
height: 100vh;
display: -ms-grid;
display: grid;
place-content: center;
}
main .content {
width: 70%;
}
main .content h1 {
font-size: 3em;
position: relative;
}
main .content h1 span {
display: block;
}
main .content p {
font-size: 1.2em;
width: 80%;
line-height: 1.7em;
margin-bottom: 2em;
}
aside {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/windows.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
img {
width: 34%;
position: absolute;
right: 15%;
top: 20%;
}
a {
display: inline-block;
background: #b100f2;
color: white;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 1em;
}
span:after {
content: " ";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: white;
z-index: 1;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}Seperti biasanya kita buat default style di dalam tag body seperti font-family, margin dan lain-lain.
Selanjutnya kita memberikan style ke tag main untuk mengatur widht, margin-left, dan display. Kita juga style tag yang berada di dalam tag main seperti code diatas.
Kemudian, kita juga memberikan style ke tag aside dengan memberikan image ke dalam background. Kita juga mengatur tag img yang berada di dalam tag aside.
Di bagian akhir, kita kasih style di tag span agar headline tidak muncul dahulu karena nantinya kita akan buat effect animation dengan GSAP.
Membuat Animation dengan GSAP
Untuk langkah terakhirnya agar website yang kita buat barusan menjadi lebih keren lagi, kita perlu menambahkan effect animation di setiap element. Oleh karena itu, kita akan menggunakan GSAP untuk mempermudah membuat animation.
Disini kita memerlukan plugin tambahan yaitu css rule, kalian bisa menambahkan script berikut diatas penutup tag body.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/CSSRulePlugin.min.js"></script>
Setelah kita tambahkan plugin css rule yang nantinya dibuat untuk mengambil style css, kita perlu membuat tag script baru yang berisi animation gsap.
BACA JUGA: MEMBUAT OBJECT 3D DI WEBSITE MENGGUNAKAN THREE.JS
Didalam tag script yang kita buat barusan, isikan dengan code berikut. Untuk penjelasan detailnya ada dibawah code.
<script>
const rule = CSSRulePlugin.getRule("span:after");
const tl = gsap.timeline({defaults: {duration: 1}});
tl.from(".anim1", {y: -50, stagger: 0.6, opacity: 0})
.to(rule, {duration: 1.8, cssRule: {scaleY: 0}}, "-=2.2")
.from("aside", {backgroundPosition: "200px 0px", opacity: 0}, "-=1.5")
.from("img", {y: 50, opacity: 0}, "-=0.5");
document.getElementById("cta").addEventListener("click", () => {
tl.reversed() ? tl.play() : tl.reverse();
});
</script>Pertama kita panggil plugin CSSRulePlugin.getRule(“span:after”) untuk mengambil style span:after di css. Setalah itu, kita buat gsap.timeline() yang didalamnya kita set default durationnya menjadi 1 detik.
Selanjutnya kita panggil tl yang berisikan gsap.timeline() yang dilanjutkan dengan .from() yang berisi 2 atau 3 parameter yaitu element html, style css, dan overlaps.
Bagian terakhir kita ambil id dengan nama cta yaitu tombol button yang nantinya jika diklik akan menimbulkan effect membalikan tl pada setiap element diatas.
Penutup
Selamat sekarang kita berhasil membuat animation dengan gsap. Kalian bisa mengexplore lagi GSAP karena masih banyak fitur maupun plugin yang belum kita gunakan di tutorial kali ini.
Jika masih ada kesulitan kalian bisa komentar dibawah sini. Terimkasih.