React에서 GSAP 애니메이션을 트리거하는 재사용 가능한 버튼을 만드는 방법!

나는 반짝이는 새 포트폴리오/블로그에 GreenSock 애니메이션을 구현하는 방법을 배우기로 결심했고 이 멋진 구성 요소를 만드는 방법을 발견했습니다.

0단계: npm i/yarn이 필요한 종속성을 추가합니다.

* React
* gsap

ScrollBtn 구성 요소를 가져올 기본 파일/페이지가 이미 있다고 가정합니다.

1단계: 버튼 구성 요소 만들기

Components 폴더에 ScrollBtn.js 파일을 만듭니다.

2단계: GSAP 및 ScrollToPlugin 가져오기

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

3단계: ScrollToPlugin 등록

이것은 프로세스에서 중요한 단계입니다. 플러그인을 등록하지 않으면 앱이 넘어지고 그 이유가 궁금할 것입니다.

(완전히 경험에서 말하는 것이 아닙니다.)

import { gsap } from 'gsap/dist/gsap';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';

gsap.registerPlugin(ScrollToPlugin);

4단계: 버튼을 만드세요!

이 컴포넌트는 props의 사용을 요구할 것입니다! 이것이 재사용이 가능하도록 하는 핵심입니다. 대상 구성 요소/섹션에 ID를 지정하기만 하면 됩니다.

구성 요소의 기본은 다음과 같습니다.

const ScrollBtn = (props) => {
    return(
        <div onClick={handleClick}>
            <p>Click to scroll</p>
        </div>
    );
};

export default ScrollBtn

div/button에 onClick 속성이 있음을 알 수 있습니다.

이제 그 함수를 만들어 봅시다!

5단계: 트리거 기능 만들기

이것이 ScrollToPlugin이 필요한 곳입니다.

return 문 위에 handleClick이라는 함수를 만들고 이벤트 리스너이기 때문에 "event"에 e를 전달합니다.

e.stopPropagation()을 추가하는 것을 잊지 마십시오. 사용자가 이상한 이유로 버튼을 반복적으로 누르면 이벤트가 버블링되거나 서로 겹쳐지지 않습니다. 당신의 흐름과 경험을 다치게하십시오.

const ScrollBtn = (props) =>{
    const handleClick = (e) =>{
        e.stopPropagation()
    })
 }
 return( ...)

마지막으로 gsap 및 scrollTo 기능을 추가합니다.

const handleClick = (e) =>{
    e.stopPropagation()
    gsap.to(window, {
        duration: 1,
        scrollTo: {
            y: `${props.target}`,
            offsetY: 70,
        }
    })
}

여기에서 설명할 것이 꽤 있습니다.

먼저 gsap 구문에 따라 애니메이션될 전체 대상 요소를 선언합니다. 이 경우 전체 창입니다.

"window"는 기본적으로 사용자의 뷰포트를 대상으로 하는 JavaScript의 예약된 키워드입니다.

다음으로 우리는 우리의 행동을 선언합니다:

우리는 이것이 상당히 빨리 실행되기를 원합니다. 지속 시간을 1로 설정하면 애니메이션이 완료되는 데 약 1초가 걸립니다.

0.5에서 2 사이의 숫자를 사용하는 것이 좋습니다. 스크롤이 너무 빨라서 사이트를 힐끗 보는 것만으로도 사용자에게 약간의 현기증이 생기는 것을 원하지 않으며 그렇게 하는 것도 원하지 않습니다. 뭐라고. 버전 타겟 섹션으로 이동합니다.
*scrollTo는 우리의 주요 작업이며 자체 키 세트를 가지고 있습니다.

이를 위해 우리는 단순하게 유지하고 스크롤이 대상 섹션을 브라우저 맨 위에 고정하지 않고 약 70픽셀 떨어져서 y축 대상과 offsetY만 선언합니다. 주소 표시줄과 자체 사이의 좋은 공간.
(간격 – 패딩 및 여백 – UX/UI 디자인에서 고려해야 할 매우 중요한 요소입니다.)

React prop 메서드를 통해 이 구성 요소를 기본 페이지에 묶을 것이기 때문에 y 값은 문자열 리터럴로 둘러싸여 있습니다. 이것이 React의 구성 요소가 앱 전체에서 서로 통신할 수 있는 방법입니다.

자, 이제 쇼타임!

6단계: ScrollBtn 구성 요소를 기본 파일/페이지로 가져오기

이 경우 기본 파일이 있는 src 디렉토리 내에 "Components"디렉토리를 미리 만들었습니다.

import ScrollBtn from './Components/ScrollBtn';

물론 이 페이지에 다른 애니메이션을 사용하지 않는 한 gsap을 다시 가져올 필요가 없습니다.

7단계: 대상 섹션의 ID를 확인하십시오.

섹션 ID가 "섹션-1"이라고 가정해 보겠습니다. 이것이 ScrollBtn을 이 페이지에 연결하는 방법입니다.

y: ${props.target}을 기억하십니까?
작동 방식은 다음과 같습니다.

<ScrollBtn target="#section-1" />
    (...)
<div id="section-1">...</div>

id를 타겟팅하기 때문에 "#"을 추가했습니다.

모든 것이 잘되면 버튼이 어디에 있든 "#section-1"이 있는 곳까지 아래로 또는 위로 스크롤됩니다.

다음은 CodeSandbox의 작업 예입니다.

이 튜토리얼이 도움이 되었기를 바랍니다!

이 게시물을 소셜 미디어에 공유하여 그랬는지 알려주세요!

저를 태그하는 것을 잊지 마세요: !