Animowanie komponentów React za pomocą GreenSock

Na początku istnienia sieci WWW rzeczy były raczej statyczne i nudne. Strony internetowe były w większości oparte na projektach graficznych i layoutach ze świata druku, aż do wprowadzenia animacji. Animacja może angażować i utrzymywać uwagę ludzi dłużej niż statyczna strona internetowa oraz wyraźniej i skuteczniej komunikować pomysł lub koncepcję.

Jednak, jeśli nie zostaną wykonane prawidłowo, animacje mogą utrudnić interakcję użytkownika z produktem i negatywnie wpłynąć na przyczepność. GreenSock Animation Platform AKA (GSAP) to potężna biblioteka JavaScript, która umożliwia programistom front-end, animatorom i projektantom tworzenie wydajnych animacji opartych na osi czasu. Pozwala miłośnikom animacji przejąć precyzyjną kontrolę nad ich sekwencjami animacji, a nie czasami ograniczającymi właściwościami keyframe i animation , które oferuje CSS.

W tym artykule przedstawię niektóre funkcje GSAP, takie jak scrollTriggers , Timelines , Easing itp. Na koniec zbudujemy intuicyjny interfejs użytkownika, animując aplikację React za pomocą tych funkcji. Sprawdź gotowy projekt na codeandbox.

Ten artykuł przyda Ci się, jeśli:

• Tworzyłeś animacje w aplikacjach internetowych za pomocą HTML, CSS i JavaScript.
• Budujesz już animowane strony internetowe w aplikacjach React z pakietami takimi jak animate.css, React-motion, Framer-motion i React-Spring, a ponadto chcesz sprawdzić alternatywy.
• Jesteś entuzjastą Reacta i chciałbyś tworzyć złożone animacje w aplikacjach internetowych opartych na React.

Przyjrzymy się, jak zbudować różne animacje z istniejącego projektu internetowego. Weźmy się za to!

Uwaga : w tym artykule zakładamy, że znasz się na HTML, CSS, JavaScript i React.js.

Co to jest GSAP?

GreenSock Animation Platform, znana również jako GSAP, to ultrawydajna, profesjonalna animacja dla nowoczesnego Internetu, która umożliwia programistom animowanie ich aplikacji w sposób modułowy, deklaratywny i wielokrotnego użytku. Jest niezależny od frameworka i może być używany w dowolnym projekcie opartym na JavaScript, ma bardzo minimalny rozmiar pakietu i nie będzie nadmiernie rozszerzał Twojej aplikacji.

GSAP może wykonywać animacje kanwy, używane do tworzenia środowisk WebGL i tworzenia dynamicznych animacji SVG oraz jako doskonała obsługa przeglądarek.

Dlaczego warto korzystać z GSAP?

Być może nie jesteś jeszcze gotowy, aby zdradzić inne frameworki, lub nie jesteś przekonany do skorzystania z zalet GSAP. Pozwólcie, że podam kilka powodów, dla których warto rozważyć GSAP.

Możesz tworzyć złożone animacje

Biblioteka JavaScript GSAP umożliwia programistom budowanie od prostych do bardzo złożonych animacji opartych na fizyce, jak w przypadku tych witryn, umożliwia programistom i projektantom sekwencjonowanie ruchu i dynamiczne sterowanie animacją. Ma wiele wtyczek, takich jak DrawSVGPlugin, MorphSVGPlugin i wiele innych, co sprawia, że ​​tworzenie animacji opartych na SVG i animacje 2D/3D staje się rzeczywistością. Oprócz integracji GSAP z elementami DOM, możesz ich używać w animacjach kontekstowych WebGL/Canvas/Three.js.

Co więcej, zdolność wygładzania GSAP jest dość wyrafinowana, dzięki czemu możliwe jest tworzenie zaawansowanych efektów z wieloma bezierami w porównaniu ze zwykłą animacją CSS.

Występ

GSAP ma imponująco wysoką wydajność w różnych przeglądarkach.

Według zespołu GSAP na swojej stronie internetowej „GSAP jest 20 razy szybszy niż jQuery, a dodatkowo GSAP jest najszybszym w pełni funkcjonalnym narzędziem do animacji skryptowych na świecie. W wielu przypadkach jest nawet szybszy niż animacje i przejścia CSS3”. Potwierdź porównanie prędkości dla siebie.

Co więcej, animacje GSAP działają bez wysiłku zarówno na komputerach stacjonarnych, tabletach, jak i smartfonach. Nie trzeba dodawać długiej listy prefiksów, tym wszystkim zajmuje się pod maską GSAP.

Możesz sprawdzić więcej korzyści na GSAP lub zobaczyć, co na ten temat ma do powiedzenia Sarah Drasner.

Wady GSAP

Czy mówisz, że powinienem zawsze używać GSAP w każdym projekcie? Oczywiście nie! Wydaje mi się, że jest tylko jeden powód, dla którego możesz nie chcieć korzystać z GSAP. Dowiedzmy Się!

• GSAP jest biblioteką animacji wyłącznie opartą na JavaScript, dlatego wymaga pewnej wiedzy na temat manipulacji JavaScript i DOM, aby efektywnie wykorzystywać jego metody i interfejsy API. Ta wada krzywej uczenia się pozostawia jeszcze więcej miejsca na komplikacje dla początkujących, którzy zaczynają korzystać z JavaScript.
• GSAP nie obsługuje animacji opartych na CSS, więc jeśli szukasz biblioteki do takich, możesz równie dobrze użyć keyframes w animacji CSS.

Jeśli masz inny powód, udostępnij go w sekcji komentarzy.

W porządku, teraz, gdy Twoje wątpliwości zostały wyjaśnione, przejdźmy do sedna sprawy w GSAP.

Podstawy GSAP

Zanim stworzymy naszą animację za pomocą Reacta, zapoznajmy się z niektórymi metodami i blokami budulcowymi GSAP.

Jeśli znasz już podstawy GSAP, możesz pominąć tę sekcję i przejść od razu do sekcji projektu, gdzie przekrzywimy landing page podczas przewijania.

animacja

Animacja to pojedynczy ruch w animacji. W GSAP animacja ma następującą składnię:

 TweenMax.method(element, duration, vars)

Przyjrzyjmy się, co reprezentuje ta składnia;

1. method odnosi się do metody GSAP, za pomocą której będziesz tworzyć animacje.
2. element to element, który chcesz animować. Jeśli chcesz utworzyć animacje dla wielu elementów jednocześnie, możesz przekazać tablicę elementów do element .
3. duration to czas trwania animacji. Jest to liczba całkowita w sekundach (bez sufiksu s !).
4. vars jest obiektem właściwości, które chcesz animować. Więcej o tym później.

Metody GSAP

GSAP udostępnia wiele metod tworzenia animacji. W tym artykule wymienimy tylko kilka, takich jak gsap.to , gsap.from , gsap.fromTo . Możesz sprawdzić inne fajne metody w ich dokumentacji. Metody omówione w tej sekcji zostaną użyte do budowy naszego projektu w dalszej części tego samouczka.

• gsap.to() wartości, do których obiekt powinien być animowany, tj. wartości właściwości end animowanego obiektu — jak pokazano poniżej:
  

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

Aby zademonstrować metodę to , poniższe demo codepen pokazuje, że element z klasą kuli 250px przesunie się w poprzek x-axis w ciągu pięciu sekund, gdy komponenty zostaną zamontowane. Jeśli czas trwania nie zostanie podany, zostanie użyta domyślna wartość 500 milisekund.

Uwaga : oś x i y-axis poziomą i pionową, również we właściwościach transformacji CSS, takich jak translateX i translateY , są one reprezentowane jako x i y dla przekształceń pixel-measured oraz xPercent i yPercent dla przekształceń opartych na wartościach procentowych.

Aby zobaczyć cały fragment kodu, sprawdź plac zabaw dla codepen.

• gsap.from() — Definiuje wartości, z których obiekt powinien być animowany — tj. wartości początkowe animacji:
  

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

Demo codepen pokazuje, w jaki sposób element z klasą square jest zmieniany ze skali 4 w ciągu 3seconds po zamontowaniu komponentów. Sprawdź pełny fragment kodu w tym pisaku.

• gsap.fromTo() — pozwala zdefiniować początkowe i końcowe wartości animacji. Jest to połączenie zarówno metody from() , jak i to() .

Oto jak to wygląda;

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

Ten kod animuje element z klasą ball od krycia 0 do krycia 1 na x-axis w 3 seconds , a klasa square jest animowana od krycia od 0 do 1 w 3 seconds na osi x-axis tylko wtedy, gdy komponent zostanie zamontowany. Aby zobaczyć, jak działa metoda fromTo i pełny fragment kodu, sprawdź demo na CodePen poniżej.

Uwaga : za każdym razem, gdy animujemy właściwości pozycyjne, takie jak left i top , musimy upewnić się, że odpowiednie elementy muszą mieć właściwość pozycji CSS o wartości relative , absolute lub fixed .

Łagodzenie

Oficjalna dokumentacja GSAP określa wygładzanie jako główny sposób zmiany czasu Twoich Tweenów. Określa, w jaki sposób obiekt zmienia pozycję w różnych punktach. Łatwość kontroluje szybkość zmian animacji w GSAP i służy do ustawiania stylu animacji obiektu.

GSAP zapewnia różne rodzaje ułatwień i opcji, aby zapewnić większą kontrolę nad tym, jak powinna zachowywać się animacja. Zapewnia również wizualizator ułatwień, który pomoże Ci wybrać preferowane ustawienia łatwości.

Istnieją trzy rodzaje ułatwień i różnią się one sposobem działania.

1. in() — Ruch zaczyna się powoli, a następnie nabiera tempa pod koniec animacji.
2. out() — Animacja zaczyna się szybko, a następnie zwalnia pod koniec animacji.
3. inOut() — Animacja zaczyna się powoli, nabiera tempa w połowie i powoli się kończy.

W tym przykładzie wygładzania połączyliśmy animacje, które wyświetlały trzy rodzaje krzywych napięcia, bounce.in , bounce.out i bounce.inOut , oraz ustawiliśmy opóźnienie liczby sekund potrzebnej do ukończenia animacji przed rozpoczęciem następnej tylko wtedy, gdy komponent to mocowania. Ten wzór jest powtarzalny, w następnej sekcji zobaczymy, jak możemy wykorzystać oś czasu, aby zrobić to lepiej.

Terminy

Oś czasu działa jak kontener dla wielu animacji. Animuje animacje w kolejności sekwencyjnej i nie zależy od czasu trwania poprzedniej animacji. Oś czasu ułatwia sterowanie animacją jako całością i precyzyjne zarządzanie ich synchronizacją.

Osie czasu można napisać, tworząc instancję osi czasu w następujący sposób:

 gsap.timeline();

Możesz także połączyć wiele animacji z osią czasu na dwa różne sposoby, w poniższym kodzie:

 ##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', {})

Odtwórzmy poprzedni przykład z osią czasu:

 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'));

Wewnątrz haczyka useEffect utworzyliśmy zmienną (tl) , która przechowuje instancję osi czasu, a następnie użyliśmy zmiennej tl do animowania naszej animacji sekwencyjnie bez zależności od poprzedniej animacji, przekazując te same właściwości, co w poprzedni przykład. Aby zapoznać się z kompletnym fragmentem kodu tego demo, sprawdź poniższy plac zabaw dla codepen.

Zobacz prezentację Pen [React GSAP (Easing with Timeline)](https://codepen.io/smashingmag/pen/zYqaEmE) autorstwa Blessing Krofegha.

Teraz, gdy już poznaliśmy kilka podstawowych elementów budulcowych GSAP, zobaczmy, jak możemy zbudować kompletną animację w typowej aplikacji React w następnej sekcji. Zacznijmy lot!

Tworzenie animowanego landing page'a za pomocą React i GSAP

Przejdźmy do animacji aplikacji React. Upewnij się, że sklonowałeś repozytorium przed rozpoczęciem i uruchom npm install w celu zainstalowania zależności.

Co budujemy?

Obecnie nasz landing page zawiera kilka tekstów na białym tle, menu, które się nie rozwija, bez animacji. Oto, co dodamy do strony docelowej;

• Animuj tekst i logo na stronie głównej, aby złagodzić się po zamontowaniu komponentu.
• Animuj menu, aby opadało po kliknięciu menu.
• Spraw, aby obrazy na stronie galerii były przekrzywione 20deg , gdy strona się przewija.

Sprawdź demo na codeandbox.

Proces tworzenia strony docelowej podzielimy na elementy, dzięki czemu będzie on łatwy do zrozumienia. Oto proces;

• Zdefiniuj metody animacji,
• Animuj tekst i logo,
• Przełącz menu,
• Spraw, aby obrazy były przekrzywione o 20deg na przewijaniu strony.

składniki

• Animate.js — Zdefiniowano wszystkie metody animacji,
• Image.js — importuj obrazy z kuchni,
• Menu.js — Zawiera funkcję przełączania menu,
• Header.js — Zawiera łącza nawigacyjne.

Zdefiniuj metody animacji

Utwórz folder component w katalogu src i utwórz plik animate.js . Skopiuj i wklej do niego następujący kod.

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

Tutaj zaimportowaliśmy gsap . Napisaliśmy wyeksportowaną funkcję strzałki, która animuje tekst na landingu. Pamiętaj, że gsap.from() definiuje wartości, od których obiekt powinien być animowany. Funkcja posiada parametr elem , który reprezentuje klasę, która ma być animowana. Pobiera kilka właściwości i przypisuje wartości takie jak xPercent: -20 (przekształca obiekt o -20%), nadaje obiektowi nieprzezroczystość, sprawia, że ​​obiekt scale się o -1 , ease obiekt w 2sec .

Aby sprawdzić, czy to działa, przejdź do App.js i dołącz następujący kod.

 ... //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> ); }

Tutaj importujemy metodę textIntro z komponentu Aminate . Aby uzyskać dostęp do DOM, useRef haka Ref. Stworzyliśmy zmienną intro , której wartość jest ustawiona na null . Następnie w haczyku useEffect wywołaliśmy metodę textIntro i zmienną intro . Wewnątrz naszego komponentu home, w tagu h5 , zdefiniowaliśmy właściwość ref i przekazaliśmy zmienną intro .

Następnie mamy menu, ale nie rozwija się ono po kliknięciu. Niech to zadziała! W składniku Header.js dodaj poniższy kod.

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

W tym komponencie zdefiniowaliśmy stan naszego menu i przycisku, wewnątrz zaczepu useEffect nasłuchiwaliśmy zmian strony za pomocą zaczepu useHistory , jeśli strona się zmieni, ustawiamy wartości stanu clicked i menuName odpowiednio na false i Menu .

Aby obsłużyć nasze menu, sprawdziliśmy czy wartość naszego stanu początkowego jest false, jeśli true zmieniamy wartości initial , clicked i menuName na null , true i Close . W przeciwnym razie sprawdzamy, czy przycisk jest kliknięty, jeśli true zmienimy menuName na Menu . Następnie mamy funkcję disabledMenu , która wyłącza nasz przycisk na 1sec po kliknięciu.

Na koniec, w naszym button , przypisaliśmy disabled do disabled , co jest wartością logiczną, która wyłączy przycisk, gdy jego wartość jest true . Obsługa przycisku onClick jest powiązana z funkcją toggleMenu . Jedyne, co tutaj zrobiliśmy, to przełączyliśmy tekst w naszym menu i przekazaliśmy stan do komponentu Menu , który utworzymy najszybciej. Napiszmy metody, które spowodują, że nasze menu będzie rozwijane przed utworzeniem właściwego komponentu Menu . Udaj się do Animate.js i wklej do niego ten kod.

 .... //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, }, }); };

Tutaj mamy funkcję o nazwie menuShow , która przechyla menu w poziomie o 2degrees , łagodzi menu, przesuwa animację za pomocą właściwości stagger i przekształca menu od right to top w 0.7sec , te same właściwości dotyczą funkcji menuHide . Aby skorzystać z tych funkcji, utwórz plik Menu.js wewnątrz components i wklej do niego ten kod.

 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

W komponencie Menu zaimportowaliśmy animowane funkcje, którymi są menuShow , menuHide i textIntro . Następnie przypisaliśmy zmienne do każdego utworzonego useRef dla naszych elementów DOM za pomocą haka refs i przekazaliśmy null jako ich wartości. Wewnątrz haka useEffect sprawdzamy stan menu , jeśli clicked jest false , wywołujemy funkcję menuHide , w przeciwnym razie, jeśli clicked stan jest true wywołujemy funkcję menuShow . Na koniec upewniliśmy się, że dane elementy DOM mają swoje specyficzne menuWrapper refs show1 , show2 . Dzięki temu ożywiliśmy nasze menu.

Zobaczmy, jak to wygląda.

Ostatnią animacją, którą moglibyśmy zaimplementować, jest sprawienie, by nasze obrazy w naszej galerii były skew podczas przewijania. Zobaczmy teraz stan naszej galerii.

Aby zaimplementować animację pochylenia w naszej galerii, przejdźmy do Animate.js i dodajmy do niego kilka kodów.

 .... //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, }); }, }); }

Stworzyliśmy funkcję o nazwie skewGallery , przekazaliśmy elem1 jako parametr i zarejestrowaliśmy ScrollTrigger .

ScrollTrigger to wtyczka w GSAP, która umożliwia wyzwalanie animacji opartych na przewijaniu, jak w tym przypadku pochylania obrazów podczas przewijania strony.

Aby prawa krawędź przylegała do paska przewijania, przekazaliśmy right center wartość właściwości transformOrigin , a także ustawiliśmy właściwość force3D na true w innym, aby poprawić wydajność.

Zadeklarowaliśmy zmienną clamp , która oblicza nasz skos i zapewnia, że ​​nie przekracza 20degs . Wewnątrz obiektu ScrollTrigger przypisaliśmy właściwość trigger do parametru elem1 , który byłby elementem, który musi zostać wyzwolony, gdy wywołamy tę funkcję. Mamy funkcję zwrotną onUpdate , w której znajduje się zmienna velocity , która oblicza aktualną prędkość i dzieli ją przez 300 .

Na koniec animujemy element z jego aktualnych wartości, ustawiając inne wartości. Ustawiamy skew na początkowo 0 , a skewY na zmienną velocity 0.8 .

Następnie musimy wywołać tę funkcję w naszym pliku App.js

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

Tutaj zaimportowaliśmy skewGalley z ./components/Animate , utworzyliśmy odnośnik skewImage , który jest skierowany do elementu obrazu. Wewnątrz haka useEffect wywołaliśmy funkcję skewGallery i przekazaliśmy skewImage ref jako parametr. Na koniec przekazaliśmy skewImage do atrybutu ref to.

Zgodzisz się ze mną, że do tej pory była to całkiem fajna podróż. Oto podgląd na CodeSanbox

Repozytorium wspierające ten artykuł jest dostępne na Github.

Wniosek

Zbadaliśmy potencjał GSAP w projekcie React, tylko zarysowaliśmy powierzchnię w tym artykule, nie ma ograniczeń co do tego, co możesz zrobić z GSAP, jeśli chodzi o animację. Oficjalna strona internetowa GSAP oferuje dodatkowe wskazówki, które pomogą Ci w dokładnym zrozumieniu metod i wtyczek. Istnieje wiele dem, które zadziwią Cię tym, co ludzie zrobili z GSAP. Chętnie poznam Twoje doświadczenia z GSAP w sekcji komentarzy.

Zasoby

1. Dokumentacja GSAP, GreenSock
2. „Przewodnik dla początkujących po platformie animacji GreenSock”, Nicholas Kramer, freeCodeCamp
3. „Wprowadzenie do animacji z interfejsem Greensock Animation API (GSAP)” Zell Liew