Menganimasikan Komponen React Dengan GreenSock

Selama hari-hari awal World Wide Web, segalanya agak statis dan membosankan. Halaman web sebagian besar didasarkan pada desain grafis dan tata letak dari dunia cetak sampai animasi diperkenalkan. Animasi dapat menarik dan menahan perhatian orang lebih lama daripada halaman web statis dan mengomunikasikan ide atau konsep dengan lebih jelas dan efektif.

Namun, jika tidak dilakukan dengan benar, animasi dapat menghambat interaksi pengguna dengan produk Anda dan berdampak negatif pada daya tarik. GreenSock Animation Platform AKA (GSAP) adalah pustaka JavaScript yang kuat yang memungkinkan pengembang front-end, animator, dan desainer untuk membuat animasi berbasis garis waktu yang berkinerja baik. Ini memungkinkan pecinta animasi mengambil kendali yang tepat dari urutan animasi mereka daripada keyframe dan properti animation yang terkadang membatasi yang ditawarkan CSS.

Pada artikel ini, saya akan memperkenalkan beberapa fitur GSAP seperti scrollTriggers , Timelines , Easing dll, pada akhirnya kita akan membangun antarmuka pengguna yang intuitif dengan menganimasikan aplikasi React dengan fitur ini. Lihat proyek yang sudah selesai di codeandbox.

Artikel ini akan bermanfaat bagi Anda jika:

• Anda telah membangun animasi pada aplikasi web dengan HTML, CSS, dan JavaScript.
• Anda sudah membangun halaman web animasi di aplikasi React dengan paket seperti animate.css, React-motion, Framer-motion, dan React-Spring, plus Anda ingin memeriksa alternatifnya.
• Anda adalah penggemar React, dan Anda ingin membuat animasi kompleks pada aplikasi web berbasis React.

Kita akan melihat bagaimana membangun berbagai animasi dari proyek web yang ada. Mari kita lakukan!

Catatan : Artikel ini mengasumsikan Anda nyaman dengan HTML, CSS, JavaScript, dan React.js.

Apa itu GSAP?

GreenSock Animation Platform juga dikenal sebagai GSAP adalah animasi kelas profesional dengan kinerja sangat tinggi untuk web modern yang memungkinkan pengembang untuk menganimasikan aplikasi mereka dengan cara modular, deklaratif, dan dapat digunakan kembali. Ini adalah kerangka-agnostik dan dapat digunakan di semua proyek berbasis JavaScript, memiliki ukuran bundel yang sangat minimal dan tidak akan mengasapi aplikasi Anda.

GSAP dapat melakukan animasi kanvas, digunakan untuk membuat pengalaman WebGL, dan membuat animasi SVG dinamis dan sebagai dukungan browser yang hebat.

Mengapa Menggunakan GSAP?

Mungkin Anda belum siap untuk mengkhianati kerangka kerja lain, atau Anda belum yakin untuk menerima kebaikan yang datang dengan GSAP. Izinkan saya memberi Anda beberapa alasan mengapa Anda mungkin ingin mempertimbangkan GSAP.

Anda Dapat Membangun Animasi Kompleks

Pustaka JavaScript GSAP memungkinkan pengembang untuk membuat animasi berbasis fisika yang sederhana hingga yang sangat kompleks seperti dalam kasus situs ini, memungkinkan pengembang dan perancang mengurutkan gerakan dan mengontrol animasi secara dinamis. Ini memiliki banyak plugin seperti DrawSVGPlugin, MorphSVGPlugin, dan banyak lagi, yang membuat pembuatan animasi berbasis SVG dan animasi 2D/3D menjadi kenyataan. Selain mengintegrasikan GSAP pada elemen DOM, Anda dapat menggunakannya dalam animasi berbasis konteks WebGL/Canvas/ Three.js.

Selain itu, kapasitas easing GSAP cukup canggih, sehingga memungkinkan untuk membuat efek lanjutan dengan beberapa bezier dibandingkan dengan animasi CSS biasa.

Pertunjukan

GSAP memiliki kinerja tinggi yang mengesankan di berbagai browser.

Menurut tim GSAP, di situs web mereka, “GSAP 20x lebih cepat dari jQuery, ditambah GSAP adalah alat animasi skrip berfitur lengkap tercepat di planet ini. Ini bahkan lebih cepat daripada animasi dan transisi CSS3 dalam banyak kasus.” Konfirmasikan perbandingan kecepatan untuk Anda sendiri.

Selain itu, animasi GSAP bekerja dengan mudah di komputer desktop, tablet, dan smartphone. Tidak perlu menambahkan daftar awalan yang panjang, ini semua ditangani oleh GSAP.

Anda dapat melihat lebih banyak manfaat di GSAP atau melihat apa yang dikatakan Sarah Drasner tentangnya di sini.

Kekurangan GSAP

Apakah Anda mengatakan saya harus selalu menggunakan GSAP untuk setiap proyek? Tentu saja tidak! Saya rasa, hanya ada satu alasan mengapa Anda tidak ingin menggunakan GSAP. Mari kita cari tahu!

• GSAP hanyalah perpustakaan animasi berbasis JavaScript, oleh karena itu memerlukan beberapa pengetahuan tentang JavaScript dan manipulasi DOM untuk secara efektif memanfaatkan metode dan API-nya. Kelemahan kurva belajar ini menyisakan lebih banyak ruang untuk komplikasi bagi pemula yang memulai dengan JavaScript.
• GSAP tidak melayani animasi berbasis CSS, oleh karena itu jika Anda mencari perpustakaan untuk itu, Anda sebaiknya menggunakan keyframes dalam animasi CSS.

Jika kamu punya alasan lain, jangan ragu untuk membagikannya di kolom komentar.

Baiklah, sekarang setelah keraguan Anda hilang, mari kita beralih ke beberapa seluk beluk di GSAP.

Dasar-dasar GSAP

Sebelum kita membuat animasi menggunakan React, mari kita kenali beberapa metode dan blok penyusun GSAP.

Jika Anda sudah mengetahui dasar-dasar GSAP, Anda dapat melewati bagian ini dan langsung menuju ke bagian proyek, di mana kita akan membuat halaman arahan miring saat menggulir.

dua belas

Tween adalah gerakan tunggal dalam animasi. Di GSAP, tween memiliki sintaks berikut:

 TweenMax.method(element, duration, vars)

Mari kita lihat apa yang diwakili oleh sintaks ini;

1. method mengacu pada metode GSAP yang ingin Anda tween.
2. element adalah elemen yang ingin Anda animasikan. Jika Anda ingin membuat tween untuk beberapa elemen sekaligus, Anda dapat meneruskan array elemen ke element .
3. duration adalah durasi tween Anda. Ini adalah bilangan bulat dalam hitungan detik (tanpa akhiran s !).
4. vars adalah objek dari properti yang ingin Anda animasikan. Lebih lanjut tentang ini nanti.

metode GSAP

GSAP menyediakan banyak metode untuk membuat animasi. Dalam artikel ini, kami hanya akan menyebutkan beberapa seperti gsap.to , gsap.from , gsap.fromTo . Anda dapat melihat metode keren lainnya di dokumentasi mereka. Metode yang dibahas dalam bagian ini akan digunakan dalam membangun proyek kita nanti dalam tutorial ini.

• gsap.to() nilai yang objeknya harus dianimasikan yaitu nilai properti akhir dari objek animasi — seperti yang ditunjukkan di bawah ini:
  

   gsap.to('.ball', {x:250, duration: 5})

Untuk mendemonstrasikan metode to demo codepen di bawah ini menunjukkan bahwa elemen dengan kelas bola 250px akan bergerak melintasi x-axis dalam lima detik saat komponen dipasang. Jika durasi tidak diberikan, default 500 milidetik akan digunakan.

Catatan : sumbu x dan y-axis horizontal dan vertikal, juga dalam properti transformasi CSS seperti translateX dan translateY , sumbu tersebut direpresentasikan sebagai x dan y untuk transformasi pixel-measured dan xPercent dan yPercent untuk transformasi berbasis persentase.

Untuk melihat cuplikan lengkap kode, periksa taman bermain codepen.

• gsap.from() — Mendefinisikan nilai objek yang harus dianimasikan — yaitu, nilai awal animasi:
  

   gsap.from('.square', {duration:3, scale: 4})

Demo codepen menunjukkan bagaimana elemen dengan kelas square diubah ukurannya dari skala 4 dalam 3 3seconds saat komponen dipasang. Periksa cuplikan kode lengkap pada codepen ini.

• gsap.fromTo() — memungkinkan Anda menentukan nilai awal dan akhir untuk animasi. Ini adalah kombinasi dari metode from() dan to() .

Berikut tampilannya;

 gsap.fromTo('.ball',{opacity:0 }, {opacity: 1 , x: 200 , duration: 3 }); gsap.fromTo('.square', {opacity:0, x:200}, { opacity:1, x: 1 , duration: 3 });

Kode ini akan menganimasikan elemen dengan kelas ball dari opacity 0 hingga opacity 1 melintasi x-axis dalam 3 seconds dan kelas square dianimasikan dari opacity 0 hingga 1 dalam 3 seconds melintasi x-axis hanya ketika komponen dipasang. Untuk melihat cara kerja metode fromTo dan cuplikan kode lengkapnya, lihat demo di CodePen di bawah ini.

Catatan : Setiap kali kita menganimasikan properti posisi, seperti left dan top , kita harus memastikan bahwa elemen yang bersangkutan harus memiliki properti CSS position baik relative , absolute , atau fixed .

Melonggarkan

Dokumentasi resmi GSAP mendefinisikan easing sebagai cara utama untuk mengubah waktu Tweens Anda. Ini menentukan bagaimana suatu objek mengubah posisi pada titik yang berbeda. Kemudahan mengontrol laju perubahan animasi di GSAP dan digunakan untuk menyetel gaya animasi objek.

GSAP menyediakan berbagai jenis kemudahan dan opsi untuk memberi Anda kontrol lebih terhadap bagaimana animasi Anda seharusnya berperilaku. Ini juga menyediakan Visualizer Kemudahan untuk membantu Anda memilih pengaturan kemudahan pilihan Anda.

Ada tiga jenis kemudahan, dan mereka berbeda dalam pengoperasiannya.

1. in() — Gerak dimulai perlahan, lalu menambah kecepatan menjelang akhir animasi.
2. out() — Animasi dimulai dengan cepat lalu melambat di akhir animasi.
3. inOut() — Animasi mulai lambat, mengambil langkah di tengah jalan, dan berakhir perlahan.

Dalam contoh easing ini, kami merangkai tween yang menampilkan tiga jenis kemudahan bounce.in , bounce.out dan bounce.inOut , dan menetapkan penundaan jumlah detik yang dibutuhkan animasi untuk menyelesaikan sebelum memulai yang berikutnya hanya ketika komponennya adalah mount. Pola ini berulang, di bagian berikutnya kita akan melihat bagaimana kita bisa menggunakan garis waktu untuk melakukan ini dengan lebih baik.

Garis waktu

Timeline bertindak sebagai wadah untuk beberapa remaja. Ini menjiwai tween secara berurutan, dan tidak tergantung pada durasi tween sebelumnya. Timeline membuatnya mudah untuk mengontrol remaja secara keseluruhan dan mengatur waktu mereka dengan tepat.

Garis waktu dapat ditulis dengan membuat turunan garis waktu seperti:

 gsap.timeline();

Anda juga dapat menghubungkan beberapa remaja ke garis waktu dengan dua cara berbeda, dalam kode di bawah ini:

 ##Method 1 const tl = gsap.timeline(); // create an instance and assign it a variable tl.add(); // add tween to timeline tl.to('element', {}); tl.from('element', {}); ##Method 2 gsap.timeline() .add() // add tween to timeline .to('element', {}) .from('element', {})

Mari kita buat ulang contoh sebelumnya dengan garis waktu:

 const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app')); const { useRef, useEffect } = React; const Balls = () => { useEffect(() => { const tl = gsap.timeline(); tl.to('#ball1', {x:1000, ease:"bounce.in", duration: 3}) tl.to('#ball2', {x:1000, ease:"bounce.out", duration: 3, delay:3 }) tl.to('#ball3', {x:1000, ease:"bounce.inOut", duration: 3, delay:6 }) }, []); } ReactDOM.render( , document.getElementById('app'));

Di dalam kait useEffect , kami membuat variabel (tl) yang menyimpan instance timeline, selanjutnya kami menggunakan variabel tl untuk menganimasikan tween kami secara berurutan tanpa bergantung pada tween sebelumnya untuk dianimasikan, meneruskan properti yang sama seperti di contoh sebelumnya. Untuk cuplikan kode lengkap demo ini, periksa taman bermain codepen di bawah ini.

Lihat demo Pena [React GSAP (Easing with Timeline)](https://codepen.io/smashingmag/pen/zYqaEmE) oleh Blessing Krofegha.

Sekarang setelah kita merasakan beberapa blok pembangun dasar GSAP, mari kita lihat bagaimana kita dapat membangun animasi lengkap dalam aplikasi React pada umumnya di bagian selanjutnya. Mari kita mulai penerbangannya!

Membangun Halaman Arahan Animasi Dengan React Dan GSAP

Mari kita menganimasikan Aplikasi React. Pastikan Anda mengkloning repo sebelum memulai dan menjalankan npm install untuk menginstal dependensi.

Apa yang Kami Bangun?

Saat ini, halaman arahan kami berisi beberapa teks dengan latar belakang putih, menu yang tidak drop-down, tanpa animasi sama sekali. Berikut ini adalah apa yang akan kami tambahkan ke halaman arahan;

• Menganimasikan teks dan logo di beranda, sehingga memudahkan saat komponen dipasang.
• Animasikan menu, sehingga menu akan turun saat menu diklik.
• Buat gambar di halaman galeri miring 20deg saat halaman digulir.

Lihat demo di kode dan kotak.

Kami akan memecah proses halaman arahan kami menjadi beberapa komponen, sehingga akan mudah dipahami. Berikut prosesnya;

• Tentukan metode animasi,
• Menganimasikan teks dan logo,
• Beralih menu,
• Buat gambar miring 20deg pada gulir halaman.

komponen

• Animate.js — Mendefinisikan semua metode animasi,
• Image.js — mengimpor gambar dapur,
• Menu.js — Berisi fungsi sakelar menu,
• Header.js — Berisi tautan navigasi.

Tentukan metode animasi

Buat folder component di dalam direktori src , dan buat file animate.js . Salin dan tempel kode berikut ke dalamnya.

 import gsap from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger"; //Animate text export const textIntro = elem => { gsap.from(elem, { xPercent: -20, opacity: 0, stagger: 0.2, duration: 2, scale: -1, ease: "back", }); };

Di sini, kami mengimpor gsap . Kami menulis fungsi panah yang diekspor yang menganimasikan teks di halaman arahan. Ingat bahwa metode gsap.from() mendefinisikan nilai dari objek yang harus dianimasikan. Fungsi memiliki elem elemen yang mewakili kelas yang perlu dianimasikan. Dibutuhkan beberapa properti dan memberikan nilai seperti xPercent: -20 (mengubah objek sebesar -20%), memberikan objek tanpa opacity, membuat scale objek sebesar -1 , membuat objek kembali ease dalam 2sec .

Untuk melihat apakah ini berhasil, App.js dan sertakan kode berikut.

 ... //import textIntro import {textIntro} from "./components/Animate" ... //using useRef hook to access the textIntro DOM let intro = useRef(null) useEffect(() => { textIntro(intro) }, []) function Home() { return ( <div className='container'> <div className='wrapper'> <h5 className="intro" ref={(el) => (intro = el)}></h5> The <b>SHOPPER</b>, is a worldclass, innovative, global online ecommerce platform, that meets your everyday daily needs. </h5> </div> </div> ); }

Di sini, kita mengimpor metode textIntro dari komponen Aminate . Untuk mengakses DOM kami menggunakan useRef Hook. Kami membuat intro variabel yang nilainya disetel ke null . Selanjutnya, di dalam kait useEffect , kami memanggil metode textIntro dan variabel intro . Di dalam komponen rumah kami, di tag h5 , kami mendefinisikan prop ref dan meneruskan variabel intro .

Selanjutnya, kami memiliki menu, tetapi tidak turun ketika diklik. Mari kita membuatnya bekerja! Di dalam Komponen Header.js , tambahkan kode di bawah ini.

 import React, { useState, useEffect, useRef } from "react"; import { withRouter, Link, useHistory } from "react-router-dom"; import Menu from "./Menu"; const Header = () => { const history = useHistory() let logo = useRef(null); //State of our Menu const [state, setState] = useState({ initial: false, clicked: null, menuName: "Menu", }); // State of our button const [disabled, setDisabled] = useState(false); //When the component mounts useEffect(() => { textIntro(logo); //Listening for page changes. history.listen(() => { setState({ clicked: false, menuName: "Menu" }); }); }, [history]); //toggle menu const toggleMenu = () => { disableMenu(); if (state.initial === false) { setState({ initial: null, clicked: true, menuName: "Close", }); } else if (state.clicked === true) { setState({ clicked: !state.clicked, menuName: "Menu", }); } else if (state.clicked === false) { setState({ clicked: !state.clicked, menuName: "Close", }); } }; // check if out button is disabled const disableMenu = () => { setDisabled(!disabled); setTimeout(() => { setDisabled(false); }, 1200); }; return ( <header> <div className="container"> <div className="wrapper"> <div className="inner-header"> <div className="logo" ref={(el) => (logo = el)}> <Link to="/">SHOPPER.</Link> </div> <div className="menu"> <button disabled={disabled} onClick={toggleMenu}> {state.menuName} </button> </div> </div> </div> </div> <Menu state={state} /> </header> ); }; export default withRouter(Header);

Dalam komponen ini, kami mendefinisikan menu dan status tombol kami, di dalam kait useEffect , kami mendengarkan perubahan halaman menggunakan kait useHistory , jika halaman berubah, kami menetapkan nilai status yang clicked dan menuName ke false dan Menu masing-masing.

Untuk menangani menu kami, kami memeriksa apakah nilai status awal kami salah, jika benar, kami mengubah nilai initial , clicked dan menuName menjadi null , true dan Close . Jika tidak, kami memeriksa apakah tombol diklik, jika benar kami akan mengubah menuName menjadi Menu . Selanjutnya, kami memiliki fungsi disabledMenu yang menonaktifkan tombol kami selama 1sec saat diklik.

Terakhir, di button kami, kami menetapkan disabled to disabled yang merupakan nilai boolean yang akan menonaktifkan tombol saat nilainya true . Dan handler onClick dari tombol tersebut terkait dengan fungsi toggleMenu . Yang kami lakukan di sini hanyalah mengaktifkan teks menu kami dan meneruskan status ke komponen Menu , yang akan kami buat paling cepat. Mari kita tulis metode yang akan membuat menu dropdown kita sebelum membuat komponen Menu yang sebenarnya. Animate.js dan rekatkan kode ini ke dalamnya.

 .... //Open menu export const menuShow = (elem1, elem2) => { gsap.from([elem1, elem2], { duration: 0.7, height: 0, transformOrigin: "right top", skewY: 2, ease: "power4.inOut", stagger: { amount: 0.2, }, }); }; //Close menu export const menuHide = (elem1, elem2) => { gsap.to([elem1, elem2], { duration: 0.8, height: 0, ease: "power4.inOut", stagger: { amount: 0.07, }, }); };

Di sini, kami memiliki fungsi yang disebut menuShow , yang mencondongkan menu secara horizontal 2degrees , memudahkan menu, mengimbangi animasi menggunakan properti stagger , dan mengubah menu dari right to top dalam 0.7sec , properti yang sama digunakan untuk fungsi menuHide . Untuk menggunakan fungsi ini, buat file Menu.js di dalam components dan tempel kode ini ke dalamnya.

 import React, {useEffect, useRef} from 'react' import { gsap } from "gsap" import { Link } from "react-router-dom" import { menuShow, menuHide, textIntro, } from './Animate' const Menu = ({ state }) => { //create refs for our DOM elements let menuWrapper = useRef(null) let show1 = useRef(null) let show2 = useRef(null) let info = useRef(null) useEffect(() => { // If the menu is open and we click the menu button to close it. if (state.clicked === false) { // If menu is closed and we want to open it. menuHide(show2, show1); // Set menu to display none gsap.to(menuWrapper, { duration: 1, css: { display: "none" } }); } else if ( state.clicked === true || (state.clicked === true && state.initial === null) ) { // Set menu to display block gsap.to(menuWrapper, { duration: 0, css: { display: "block" } }); //Allow menu to have height of 100% gsap.to([show1, show2], { duration: 0, opacity: 1, height: "100%" }); menuShow(show1, show2); textIntro(info); } }, [state]) return ( <div ref={(el) => (menuWrapper = el)} className="hamburger-menu"> <div ref={(el) => (show1 = el)} className="menu-secondary-background-color" ></div> <div ref={(el) => (show2 = el)} className="menu-layer"> <div className="container"> <div className="wrapper"> <div className="menu-links"> <nav> <ul> <li> <Link ref={(el) => (line1 = el)} to="/about-us" > About </Link> </li> <li> <Link ref={(el) => (line2 = el)} to="/gallery" > Gallery </Link> </li> <li> <Link ref={(el) => (line3 = el)} to="/contact-us" > Contact us </Link> </li> </ul> </nav> <div ref={(el) => (info = el)} className="info"> <h3>Our Vision</h3> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.... </p> </div> </div> </div> </div> </div> </div> ); } export default Menu

Apa yang kami lakukan di komponen Menu adalah mengimpor fungsi animasi, yaitu menuShow , menuHide , dan textIntro . Selanjutnya, kami menetapkan variabel untuk setiap refs yang dibuat untuk elemen DOM kami menggunakan kait useRef dan meneruskan null sebagai nilainya. Di dalam kait useEffect , kami memeriksa status menu , jika clicked false , kami memanggil fungsi menuHide , jika tidak, jika status clicked benar, kami memanggil fungsi menuShow . Terakhir, kami memastikan bahwa elemen DOM yang bersangkutan melewati referensi spesifiknya show2 refs , menuWrapper , show1 . Dengan itu, kami membuat menu kami dianimasikan.

Mari kita lihat bagaimana tampilannya.

Animasi terakhir yang akan kita terapkan adalah membuat gambar kita di galeri skew saat digulir. Mari kita lihat keadaan galeri kita sekarang.

Untuk menerapkan animasi skew di galeri kita, mari menuju ke Animate.js dan tambahkan beberapa kode ke dalamnya.

 .... //Skew gallery Images export const skewGallery = elem1 => { //register ScrollTrigger gsap.registerPlugin(ScrollTrigger); // make the right edge "stick" to the scroll bar. force3D: true improves performance gsap.set(elem1, { transformOrigin: "right center", force3D: true }); let clamp = gsap.utils.clamp(-20, 20) // don't let the skew go beyond 20 degrees. ScrollTrigger.create({ trigger: elem1, onUpdate: (self) => { const velocity = clamp(Math.round(self.getVelocity() / 300)); gsap.to(elem1, { skew: 0, skewY: velocity, ease: "power3", duration: 0.8, }); }, }); }

Kami membuat fungsi yang disebut skewGallery , meneruskan elem1 sebagai param, dan mendaftarkan ScrollTrigger .

ScrollTrigger adalah plugin di GSAP yang memungkinkan kita untuk memicu animasi berbasis scroll, seperti dalam hal ini mencondongkan gambar saat halaman di-scroll.

Untuk membuat tepi kanan menempel pada bilah gulir, kami memberikan nilai right center ke properti transformOrigin , kami juga menyetel properti force3D menjadi true di lain untuk meningkatkan kinerja.

Kami mendeklarasikan variabel clamp yang menghitung kemiringan kami dan memastikannya tidak melebihi 20degs . Di dalam objek ScrollTrigger , kami menetapkan properti trigger ke param elem1 , yang akan menjadi elemen yang perlu dipicu saat kami memanggil fungsi ini. Kami memiliki fungsi panggilan balik onUpdate , di dalamnya ada variabel velocity yang menghitung kecepatan saat ini dan membaginya dengan 300 .

Terakhir, kami menganimasikan elemen dari nilainya saat ini dengan menetapkan nilai lainnya. Kami menetapkan skew pada awalnya pada 0 dan skewY menjadi variabel velocity pada 0.8 .

Selanjutnya, kita harus memanggil fungsi ini di file App.js kita.

 .... import { skewGallery } from "./components/Animate" function Gallery() { let skewImage = useRef(null); useEffect(() => { skewGallery(skewImage) }, []); return ( <div ref={(el) => (skewImage = el)}> <Image/> </div> ) } ....

Di sini, kami mengimpor skewGalley dari ./components/Animate , membuat ref skewImage yang menargetkan elemen gambar. Di dalam kait useEffect , kami memanggil fungsi skewGallery dan meneruskan skewImage sebagai param. Terakhir, kami meneruskan skewImage ke ref ke atribut.

Anda akan setuju dengan saya itu adalah perjalanan yang cukup keren sejauh ini. Ini previewnya di CodeSanbox

Repo pendukung untuk artikel ini tersedia di Github.

Kesimpulan

Kami telah menjelajahi potensi GSAP dalam proyek React, kami hanya menggores permukaan dalam artikel ini, tidak ada batasan untuk apa yang dapat Anda lakukan dengan GSAP karena menyangkut animasi. Situs web resmi GSAP menawarkan kiat tambahan untuk membantu Anda memperoleh pemahaman menyeluruh tentang metode dan plugin. Ada banyak demo yang akan membuat Anda terpesona dengan apa yang telah dilakukan orang-orang dengan GSAP. Saya ingin mendengar pengalaman Anda dengan GSAP di bagian komentar.

Sumber daya

1. Dokumentasi GSAP, GreenSock
2. “Panduan Pemula Untuk Platform Animasi GreenSock,” Nicholas Kramer, freeCodeCamp
3. “Pengantar Animasi Dengan Greensock Animation API (GSAP),” Zell Liew