GreenSock으로 React 컴포넌트 애니메이션하기

월드 와이드 웹의 초기에는 상황이 다소 정적이고 지루했습니다. 웹 페이지는 애니메이션이 도입될 때까지 인쇄 세계의 그래픽 디자인과 레이아웃을 대부분 기반으로 했습니다. 애니메이션은 정적인 웹 페이지보다 더 오래 사람들의 관심을 끌고 관심을 끌 수 있으며 아이디어나 개념을 보다 명확하고 효과적으로 전달할 수 있습니다.

그러나 제대로 수행되지 않으면 애니메이션이 제품과의 사용자 상호 작용을 방해하고 견인력에 부정적인 영향을 줄 수 있습니다. GSAP(GreenSock Animation Platform AKA)는 프론트엔드 개발자, 애니메이터 및 디자이너가 타임라인 기반의 고성능 애니메이션을 만들 수 있도록 하는 강력한 JavaScript 라이브러리입니다. 이를 통해 애니메이션 애호가는 CSS가 제공하는 keyframe 및 animation 속성을 제한하는 대신 애니메이션 시퀀스를 정밀하게 제어할 수 있습니다.

이 기사에서는 scrollTriggers , Timelines , Easing 등과 같은 GSAP의 일부 기능을 소개하고 마지막에는 이 기능으로 React 앱에 애니메이션을 적용하여 직관적인 사용자 인터페이스를 구축할 것입니다. 코드샌드박스에서 완성된 프로젝트를 확인하세요.

이 문서는 다음과 같은 경우에 유용합니다.

• HTML, CSS 및 JavaScript를 사용하여 웹 애플리케이션에서 애니메이션을 구축해 왔습니다.
• 이미 animate.css, React-motion, Framer-motion, React-Spring과 같은 패키지를 사용하여 React 앱에서 애니메이션 웹페이지를 구축하고 있으며 대안을 확인하고 싶습니다.
• React 매니아이고 React 기반 웹 애플리케이션에서 복잡한 애니메이션을 만들고 싶습니다.

기존 웹 프로젝트에서 다양한 애니메이션을 빌드하는 방법을 살펴보겠습니다. 가자!

참고 : 이 기사는 HTML, CSS, JavaScript 및 React.js에 익숙하다고 가정합니다.

GSAP이란 무엇입니까?

GSAP라고도 하는 GreenSock 애니메이션 플랫폼은 개발자가 모듈식의 선언적이며 재사용 가능한 방식으로 앱을 애니메이션할 수 있는 최신 웹용 초고성능 전문가급 애니메이션입니다. 프레임워크에 구애받지 않으며 모든 JavaScript 기반 프로젝트에서 사용할 수 있으며 번들 크기가 매우 작으며 앱이 부풀려지지 않습니다.

GSAP는 WebGL 경험을 만드는 데 사용되는 캔버스 애니메이션을 수행하고 동적 SVG 애니메이션을 만들고 훌륭한 브라우저 지원으로 사용할 수 있습니다.

GSAP를 사용하는 이유

아직 다른 프레임워크를 배신할 준비가 되지 않았거나 GSAP와 함께 제공되는 장점을 수용할 확신이 없을 수도 있습니다. GSAP를 고려하고 싶어하는 몇 가지 이유를 말씀드리겠습니다.

복잡한 애니메이션을 만들 수 있습니다

GSAP JavaScript 라이브러리를 사용하면 개발자가 이러한 사이트의 경우와 같이 단순하거나 매우 복잡한 물리 기반 애니메이션을 구축할 수 있으며 개발자와 디자이너가 모션을 시퀀스하고 애니메이션을 동적으로 제어할 수 있습니다. DrawSVGPlugin, MorphSVGPlugin 등과 같은 많은 플러그인이 있어 SVG 기반 애니메이션 및 2D/3D 애니메이션을 현실로 만들 수 있습니다. DOM 요소에 GSAP를 통합하는 것 외에도 WebGL/Canvas/Three.js 컨텍스트 기반 애니메이션 내에서 사용할 수 있습니다.

또한 GSAP의 easing 능력은 상당히 정교하여 일반 CSS 애니메이션에 비해 여러 베지어를 사용하여 고급 효과를 만들 수 있습니다.

성능

GSAP는 다양한 브라우저에서 인상적인 고성능을 제공합니다.

GSAP 팀에 따르면 웹 사이트에서 "GSAP는 jQuery보다 20배 빠르며 GSAP는 지구상에서 가장 빠른 완전한 기능을 갖춘 스크립트 애니메이션 도구입니다. 많은 경우 CSS3 애니메이션 및 전환보다 훨씬 빠릅니다.” 속도 비교를 직접 확인하십시오.

또한 GSAP 애니메이션은 데스크톱 컴퓨터, 태블릿 및 스마트폰 모두에서 쉽게 수행됩니다. 긴 접두사 목록을 추가할 필요는 없습니다. 이 모든 것은 GSAP에서 내부적으로 처리하고 있습니다.

GSAP에서 더 많은 혜택을 확인하거나 여기에서 Sarah Drsner가 말하는 내용을 볼 수 있습니다.

GSAP의 단점

모든 프로젝트에 항상 GSAP를 사용해야 한다는 말씀이신가요? 당연히 아니지! GSAP를 사용하고 싶지 않은 이유는 단 한 가지뿐입니다. 알아 보자!

• GSAP는 전적으로 JavaScript 기반 애니메이션 라이브러리이므로 메서드와 API를 효과적으로 활용하려면 JavaScript 및 DOM 조작에 대한 약간의 지식이 필요합니다. 이 학습 곡선의 단점은 JavaScript를 처음 시작하는 초보자에게 더 많은 합병증의 여지를 남깁니다.
• GSAP는 CSS 기반 애니메이션을 지원하지 않으므로 이러한 라이브러리를 찾고 있다면 CSS 애니메이션에서 keyframes 을 사용하는 것이 좋습니다.

다른 이유가 있으면 댓글 섹션에서 자유롭게 공유하십시오.

자, 이제 의심이 해결되었으므로 GSAP의 핵심으로 넘어가 보겠습니다.

GSAP 기초

React를 사용하여 애니메이션을 만들기 전에 GSAP의 몇 가지 방법과 빌딩 블록에 익숙해지겠습니다.

GSAP의 기본 사항을 이미 알고 있다면 이 섹션을 건너뛰고 프로젝트 섹션으로 바로 이동할 수 있습니다. 여기에서 스크롤하는 동안 방문 페이지가 기울어지게 만들 것입니다.

트윈

트윈은 애니메이션의 단일 움직임입니다. GSAP에서 트윈의 구문은 다음과 같습니다.

 TweenMax.method(element, duration, vars)

이 구문이 무엇을 나타내는지 살펴보겠습니다.

1. method 은 트위닝할 GSAP 방법을 나타냅니다.
2. element 는 애니메이션을 적용하려는 요소입니다. 여러 요소에 대한 트윈을 동시에 만들려면 요소 배열을 element 에 전달할 수 있습니다.
3. duration 은 트윈의 지속 시간입니다. 초 단위의 정수입니다( s 접미사 제외!).
4. vars 는 애니메이션을 적용하려는 속성의 개체입니다. 이에 대한 자세한 내용은 나중에 설명합니다.

GSAP 방법

GSAP는 애니메이션을 만드는 다양한 방법을 제공합니다. 이 기사에서는 gsap.to , gsap.from , gsap.fromTo 와 같은 몇 가지만 언급합니다. 문서에서 다른 멋진 방법을 확인할 수 있습니다. 이 섹션에서 논의된 방법은 이 자습서의 뒷부분에서 프로젝트를 빌드하는 데 사용됩니다.

• gsap.to() 객체가 애니메이션되어야 하는 값, 즉 애니메이션된 객체의 end 속성 값 - 아래와 같이:
  

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

to 방법을 보여주기 위해 아래의 codepen 데모는 250px 의 ball 클래스를 가진 요소가 구성 요소가 마운트될 때 5초 안에 x-axis 가로질러 이동함을 보여줍니다. 기간이 지정되지 않은 경우 기본값 500밀리초가 사용됩니다.

참고 : x 및 y-axis 축은 각각 가로 및 세로 축을 나타내며 translateX 및 translateY 와 같은 CSS 변환 속성에서도 pixel-measured 경우 x 및 y 로 표시되고 백분율 기반 변환의 경우 xPercent 및 yPercent 로 표시됩니다.

코드의 전체 스니펫을 보려면 codepen 플레이그라운드를 확인하십시오.

• gsap.from() — 객체가 애니메이션되어야 하는 값을 정의합니다. 즉, 애니메이션의 시작 값:
  

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

3seconds 데모는 구성 요소가 마운트될 때 3초 만에 square 클래스가 있는 요소의 크기가 4에서 조정되는 방법을 보여줍니다. 이 codepen에서 전체 코드 조각을 확인하십시오.

• gsap.fromTo() — 애니메이션의 시작 및 종료 값을 정의할 수 있습니다. from() ) 메서드와 to() 메서드의 조합입니다.

다음은 어떻게 보이는지입니다.

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

이 코드는 3초 만에 x축을 가로질러 0의 불투명도에서 1 의 불투명도까지 ball 클래스가 있는 요소에 애니메이션을 적용하고 x-axis x-axis 질러 3 seconds 3 seconds 0 의 불투명도에서 1 로 square 클래스를 애니메이션합니다. 구성 요소가 마운트될 때만 x-axis . fromTo 메서드의 작동 방식과 전체 코드 조각을 보려면 아래 CodePen에서 데모를 확인하세요.

참고 : left 및 top 과 같은 위치 속성에 애니메이션을 적용할 때마다 관련 요소에 relative , absolute 또는 fixed 의 CSS 위치 속성이 있어야 합니다.

완화

GSAP 공식 문서에서는 Tweens의 타이밍을 변경하는 기본 방법으로 여유를 정의했습니다. 객체가 다른 지점에서 위치를 변경하는 방법을 결정합니다. Ease는 GSAP에서 애니메이션의 변화율을 제어하며 개체의 애니메이션 스타일을 설정하는 데 사용됩니다.

GSAP는 애니메이션 동작 방식을 더 잘 제어할 수 있도록 다양한 유형의 용이성과 옵션을 제공합니다. 또한 선호하는 속도 설정을 선택하는 데 도움이 되는 Ease Visualizer를 제공합니다.

세 가지 유형의 용이함이 있으며 작동 방식이 다릅니다.

1. in() — 모션이 천천히 시작된 다음 애니메이션이 끝날 때 속도를 높입니다.
2. out() — 애니메이션이 빠르게 시작되고 애니메이션이 끝날 때 느려집니다.
3. inOut() — 애니메이션이 느리게 시작하여 중간에 속도를 높이고 천천히 끝납니다.

이 여유 예제에서 우리는 세 가지 유형의 여유를 표시한 트윈을 연결했으며, 바운스.in , 바운스. bounce.out 및 bounce.inOut bounce.in 다음 경우에만 다음 애니메이션을 시작하기 전에 애니메이션이 완료되는 데 걸리는 지연 시간(초)을 설정했습니다. 구성 요소는 마운트입니다. 이 패턴은 반복적입니다. 다음 섹션에서 타임라인을 사용하여 이 작업을 더 잘 수행할 수 있는 방법을 살펴보겠습니다.

타임라인

타임라인 은 여러 트윈의 컨테이너 역할을 합니다. 순차적인 순서로 트윈에 애니메이션을 적용하며 이전 트윈의 지속 시간에 종속되지 않습니다. 타임라인을 사용하면 트윈 전체를 간단하게 제어하고 타이밍을 정확하게 관리할 수 있습니다.

타임라인은 다음과 같이 타임라인 인스턴스를 생성하여 작성할 수 있습니다.

 gsap.timeline();

아래 코드에서 두 가지 방법으로 여러 트윈을 타임라인에 연결할 수도 있습니다.

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

타임라인을 사용하여 이전 예제를 다시 만들어 보겠습니다.

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

useEffect 후크 내에서 타임라인의 인스턴스를 보유하는 변수 (tl) 를 만들었습니다. 다음으로 tl 변수를 사용하여 애니메이션할 이전 트윈에 의존하지 않고 순차적으로 트윈에 애니메이션을 적용하고 동일한 속성을 전달했습니다. 이전 예. 이 데모의 전체 코드 스니펫은 아래의 codepen 플레이그라운드를 확인하십시오.

이제 GSAP의 몇 가지 기본 빌딩 블록에 대한 느낌을 얻었으므로 다음 섹션에서 일반적인 React 앱에서 완전한 애니메이션을 빌드하는 방법을 살펴보겠습니다. 비행을 시작합시다!

React와 GSAP로 애니메이션 랜딩 페이지 만들기

React 앱에 애니메이션을 적용해 보겠습니다. 종속성을 설치하려면 시작하기 전에 리포지토리를 복제하고 npm install 을 실행해야 합니다.

우리는 무엇을 만들고 있습니까?

현재 우리의 방문 페이지에는 애니메이션이 없는 흰색 배경에 드롭다운 메뉴가 없는 몇 개의 텍스트가 포함되어 있습니다. 다음은 방문 페이지에 추가할 내용입니다.

• 홈페이지의 텍스트와 로고에 애니메이션을 적용하여 구성 요소가 마운트될 때 쉽게 표시되도록 합니다.
• 메뉴에 애니메이션을 적용하여 메뉴를 클릭하면 드롭다운됩니다.
• 페이지가 스크롤될 때 갤러리 페이지의 이미지가 20도 기울어 20deg 합니다.

코드샌드박스에서 데모를 확인하세요.

쉽게 이해할 수 있도록 랜딩 페이지의 프로세스를 구성 요소로 나눌 것입니다. 다음은 프로세스입니다.

• 애니메이션 방법을 정의하고,
• 텍스트 및 로고 애니메이션,
• 토글 메뉴,
• 페이지 스크롤 시 이미지가 20도 기울어 20deg 합니다.

구성 요소

• Animate.js — 모든 애니메이션 메서드 정의,
• Image.js — 조리실 이미지 가져오기,
• Menu.js — 메뉴 토글 기능이 포함되어 있습니다.
• Header.js — 탐색 링크를 포함합니다.

애니메이션 방법 정의

src 디렉토리 안에 component 폴더를 생성하고 animate.js 파일을 생성합니다. 다음 코드를 복사하여 붙여넣습니다.

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

여기서는 gsap 을 가져왔습니다. 랜딩 페이지의 텍스트에 애니메이션 효과를 주는 내보낸 화살표 함수를 작성했습니다. gsap.from() 메소드는 객체가 애니메이션되어야 하는 값을 정의한다는 것을 기억하십시오. 이 함수에는 애니메이션이 필요한 클래스를 나타내는 elem 매개변수가 있습니다. 몇 가지 속성을 사용하고 xPercent: -20 (개체를 -20% 변환), 개체에 불투명도를 부여하지 않고, 개체 scale 를 -1 로 만들고, 개체를 2sec 만에 다시 ease 만듭니다.

이것이 작동하는지 확인하려면 App.js 로 이동하여 다음 코드를 포함하세요.

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

여기에서는 Aminate 구성 요소에서 textIntro 메서드를 가져옵니다. DOM에 액세스하려면 useRef Hook을 사용했습니다. 값이 null 로 설정된 변수 intro 를 만들었습니다. 다음으로 useEffect 후크 내에서 textIntro 메서드와 intro 변수를 호출했습니다. 홈 구성 요소 내부의 h5 태그에서 ref prop을 정의하고 intro 변수를 전달했습니다.

다음으로 메뉴가 있지만 클릭할 때 드롭다운되지 않습니다. 작동시키자! Header.js 컴포넌트 안에 아래 코드를 추가하세요.

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

이 구성 요소에서 메뉴와 버튼 상태를 정의했습니다. useEffect 후크 내에서 useEffect 후크를 사용하여 페이지 변경 사항을 useHistory 했습니다. 페이지가 변경되면 clicked 및 menuName 상태 값을 각각 false 및 Menu 로 설정합니다.

메뉴를 처리하기 위해 초기 상태 값이 false인지 확인하고 true이면 initial , clicked 및 menuName 값을 null , true 및 Close 로 변경합니다. 그렇지 않으면 버튼이 클릭되었는지 확인하고 true이면 menuName 을 Menu 로 변경합니다. 다음으로, 버튼을 클릭했을 때 1sec 동안 버튼을 비활성화하는 disabledMenu 함수가 있습니다.

마지막으로 button 에서 값이 true 일 때 버튼을 비활성화하는 부울 값인 disabled 를 disabled 에 할당했습니다. 그리고 버튼의 onClick 핸들러는 toggleMenu 함수에 연결되어 있습니다. 여기서 우리가 한 일은 menu 텍스트를 토글하고 상태를 가장 빨리 생성할 Menu 구성 요소에 전달하는 것뿐이었습니다. 실제 Menu 구성 요소를 만들기 전에 메뉴 드롭다운을 만드는 메서드를 작성해 보겠습니다. Animate.js 로 이동하여 이 코드를 붙여넣습니다.

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

여기에 메뉴를 수평으로 2degrees 도 기울이고, 메뉴를 완화하고, stagger 속성을 사용하여 애니메이션을 오프셋하고, 0.7sec 만에 메뉴를 right to top 으로 변환하는 menuShow 라는 함수가 있습니다. 같은 속성이 menuHide 함수에 적용됩니다. 이러한 기능을 사용하려면 components 내부에 Menu.js 파일을 만들고 이 코드를 붙여넣습니다.

 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

Menu 구성 요소에서 한 것은 menuShow , menuHide 및 textIntro 인 애니메이션 기능을 가져오는 것이었습니다. 다음으로 refs 후크를 사용하여 DOM 요소에 대해 생성된 각 참조에 대한 변수를 할당하고 null 을 값으로 전달 useRef . useEffect 후크 내에서 menu 상태를 확인하고, clicked 가 false 이면 menuHide 함수를 호출하고, 그렇지 않으면 clicked 상태가 true이면 menuShow 함수를 호출합니다. 마지막으로, 관련된 DOM 요소가 menuWrapper , show1 , refs 와 같은 특정 참조를 전달 show2 . 이를 통해 메뉴에 애니메이션이 적용되었습니다.

어떻게 생겼는지 봅시다.

우리가 구현할 마지막 애니메이션은 스크롤할 때 갤러리의 이미지를 skew 것입니다. 지금 우리 갤러리의 상태를 보자.

갤러리에서 기울이기 애니메이션을 구현하려면 Animate.js 로 이동하여 몇 가지 코드를 추가해 보겠습니다.

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

skewGallery 라는 함수를 만들고 elem1 을 매개변수로 전달하고 ScrollTrigger 를 등록했습니다.

ScrollTrigger 는 페이지가 스크롤되는 동안 이미지를 기울이는 경우와 같이 스크롤 기반 애니메이션을 트리거할 수 있는 GSAP의 플러그인입니다.

오른쪽 가장자리가 스크롤 막대에 고정되도록 하기 위해 right center 값을 transformOrigin 속성에 전달했습니다. 또한 성능을 향상시키기 위해 other에서 force3D 속성을 true로 설정했습니다.

기울기를 계산하고 20도를 초과하지 않도록 하는 clamp 변수를 선언 20degs . ScrollTrigger 개체 내에서 이 함수를 호출할 때 트리거되어야 하는 요소인 elem1 매개변수에 trigger 속성을 할당했습니다. 우리는 onUpdate 콜백 함수를 가지고 있습니다. 내부에는 현재 속도를 계산하고 300 으로 나누는 velocity 변수가 있습니다.

마지막으로 다른 값을 설정하여 현재 값에서 요소를 애니메이션합니다. 처음에 skew 를 0 으로 설정하고 skewY 를 0.8 에서 velocity 변수로 설정했습니다.

다음으로 App.js 파일에서 이 함수를 호출해야 합니다.

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

여기에서는 ./components/Animate 에서 skewGalley 를 가져와서 이미지 요소를 대상으로 하는 skewImage 참조를 만들었습니다. useEffect 후크 내부에서 skewGallery 함수를 호출하고 skewImage ref를 매개변수로 전달했습니다. 마지막으로 ref to 속성에 skewImage 를 전달했습니다.

당신은 그것이 지금까지 매우 멋진 여행이었다는 것에 동의할 것입니다. CodeSanbox의 미리보기는 다음과 같습니다.

이 기사에 대한 지원 리포지토리는 Github에서 사용할 수 있습니다 .

결론

우리는 React 프로젝트에서 GSAP의 효능을 탐구했으며 이 기사에서는 표면만 긁었습니다. 애니메이션과 관련하여 GSAP로 할 수 있는 작업에는 제한이 없습니다. GSAP의 공식 웹사이트는 메소드와 플러그인에 대한 완전한 이해를 돕기 위한 추가 팁을 제공합니다. 사람들이 GSAP을 사용하여 수행한 작업을 보고 마음을 뺏길 데모가 많이 있습니다. 의견 섹션에서 GSAP에 대한 귀하의 경험을 듣고 싶습니다.

자원

1. GSAP 문서, GreenSock
2. "초보자를 위한 GreenSock 애니메이션 플랫폼 가이드", Nicholas Kramer, freeCodeCamp
3. "Greensock Animation API(GSAP)를 사용한 애니메이션 소개", Zell Liew