Framer Motion을 사용하여 아름다운 스크롤 애니메이션 만들기

소개

스크롤은 우리가 화면에서 매일 하는 일이지만, 스크롤이 사용자 경험에 어떤 영향을 미치는지 생각해 본 적이 있나요? 오늘날의 세계에서 스크롤은 사용자에게 원활하고 만족스러운 경험을 제공하는 방법이기도 합니다. Framer Motion과 같은 도구를 사용하면 개발자는 스크롤을 매력적이고 시각적으로 매력적인 경험으로 바꿀 수 있습니다.

오늘은 스크롤에 애니메이션을 적용하는 다양한 방법을 살펴보겠습니다. 스크롤 애니메이션의 종류와 사용법에 대해 알아봅니다. 우리는 프로젝트나 사이트에 스크롤 애니메이션을 추가할 수 있도록 패턴을 이해하게 될 것입니다.

Framer Motion을 사용하여 Next.js에서 애니메이션을 만들어 보겠습니다. 다른 프레임워크나 라이브러리를 사용하려는 경우 해당 프레임워크나 라이브러리를 사용할 수 있습니다.

그럼 더 이상 지체하지 말고 시작하겠습니다.

스크롤 애니메이션의 유형

스크롤 애니메이션에는 두 가지 유형이 있습니다.

1. 스크롤-연결된 애니메이션: 스크롤한 정도에 따라 움직이거나 변경되는 애니메이션, 스크롤할 때 요소가 계속 업데이트됩니다.

2. 스크롤-트리거 애니메이션: 요소가 뷰포트에 들어오거나 나갈 때 일반 애니메이션이 트리거됩니다.

Framer 모션을 사용하면 두 가지 모두를 얻을 수 있습니다. 두 가지를 하나씩 이해해 봅시다.

스크롤 연결 애니메이션

스크롤 연결 애니메이션은 애니메이션의 진행이나 움직임이 사용자가 스크롤한 정도에 직접 연결되는 애니메이션입니다. 이러한 유형의 애니메이션에서는 사용자가 스크롤함에 따라 요소가 계속 변경됩니다.

즉, 귀하가 지점 1에 있으면 애니메이션이 귀하를 추적하고 또한 지점 1에 있게 된다는 의미입니다. 그리고, 스크롤을 해서 2번 지점으로 가면 그 지점까지 애니메이션이 따라옵니다.

주요 기능

• 애니메이션은 스크롤 진행과 동기화됩니다.
• 스크롤하는 동안 스크롤한 양에 따라 애니메이션이 실시간으로 업데이트됩니다.
• 이러한 애니메이션에는 일반적으로 Framer Motion에서 useScroll 및 useTransform 후크(앞에서 자세히 알아볼 예정)를 사용하여 요소의 모양을 이동, 크기 조정, 회전 또는 변경하는 작업이 포함될 수 있습니다.

스크롤 트리거 애니메이션

스크롤 트리거 애니메이션은 스크롤할 때 요소가 특정 뷰포트에 들어오거나 나갈 때 발생합니다. 이는 사용자가 페이지의 특정 부분으로 스크롤할 때만 애니메이션이 시작된다는 의미입니다.

그래서 제가 지점 1에 있고 지점 3에 스크롤 트리거 애니메이션을 설정했다면 이 애니메이션은 지점 3에서 발생합니다. 즉, 해당 뷰포트에 도달할 때만 애니메이션이 실행됩니다(이 경우 포인트 3)

이것을 이해하려면 이 영상을 확인하세요?. 여기서는 주황색 요소가 뷰포트에 들어오면 화면에 완전히 표시되고 탐색 모음이 표시된다는 의미임을 알 수 있습니다.

주요 기능

• 스크롤 위치에 의해 트리거됨: 스크롤 링크 애니메이션처럼 스크롤과 지속적으로 동기화되는 대신 특정 스크롤 위치에 도달하면 애니메이션이 활성화됩니다. 이는 일반적으로 whileInView 또는 onEnter와 같은 조건을 사용하여 달성됩니다.

• 이산 애니메이션: 스크롤 링크 애니메이션과 달리 스크롤 트리거 애니메이션은 요소가 들어가거나 나올 때와 같은 특정 순간에 발생합니다. 뷰포트. 여기에는 사용자가 특정 지점을 스크롤할 때 한 번 발생하는 페이드 인, 슬라이드 인 또는 기타 시각 효과가 포함될 수 있습니다.

• 일회성 또는 반복 가능한 애니메이션: 스크롤 트리거 애니메이션은 요소가 처음 보일 때 한 번만 재생되도록 설정하거나 요소가 나타날 때마다 반복할 수 있습니다. 사용 사례에 따라 요소가 뷰포트에 다시 들어갑니다.
  

  66623306d58a1053688cd78dc392ea42

다음은 무엇입니까?

이제 두 가지 유형의 스크롤 애니메이션과 차이점을 이해했으며, 이러한 애니메이션을 만드는 데 사용되는 패턴을 이해해 보겠습니다. 이를 통해 모든 프로젝트에 스크롤 애니메이션을 추가할 수 있습니다.

먼저 이를 실질적으로 이해하기 위한 프로젝트를 설정한 후 두 가지 유형의 애니메이션을 모두 제작해보겠습니다.

프로젝트 설정

필요한 모든 종속성을 포함하여 Next.js 프로젝트를 설정하는 것부터 시작하겠습니다. 이 프로젝트에서는 StalkBlitz를 사용할 예정이지만 VSCode도 사용할 수 있습니다. 모든 단계는 VSCode 관점에서 설명하므로 단계를 따라갈 수 있습니다.

1. TypeScript를 사용하여 새 Next.js 프로젝트를 만듭니다.
   

   npx create-next-app@latest
   

   설치 시 다음 메시지가 표시됩니다.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. 프레이머 모션 설치
   

     npm install framer-motion
   

3. 기본 파일을 정리하세요.
   app/page.tsx에서 기본 코드를 제거합니다. 스크롤 애니메이션에 집중하기 위해 처음부터 시작하겠습니다. 파일은 다음과 같아야 합니다.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. 개발서버 시작
   

     66623306d58a1053688cd78dc392ea42
   
   

스크롤 애니메이션 만들기

이제 프로젝트가 설정되었으므로 두 가지 유형의 스크롤 애니메이션을 하나씩 만들 수 있습니다. app/page.tsx 파일에서 직접 코드 작성을 시작하거나 별도의 구성 요소를 만들어 모두 app/page.tsx 파일로 가져올 수 있습니다.

스크롤 연결 애니메이션 만들기

스크롤 링크 애니메이션의 몇 가지 예는 다음과 같습니다.

• 스크롤 진행률 표시줄: 사용자가 페이지를 아래로 스크롤하면 채워지는 원형 또는 선형 진행률 표시줄입니다.

• 시차 스크롤: 배경 이미지 또는 요소가 전경에 비해 다른 속도로 이동하여 스크롤할 때 깊이 효과를 만들어냅니다.

• 페이드인 요소: 사용자가 스크롤하면 콘텐츠가 페이드 인됩니다.

• 배율 변환: 스크롤 진행 상황에 따라 요소의 크기가 점차 증가하거나 감소합니다. 등

애니메이션을 만들어 보겠습니다. 스크롤 링크 애니메이션을 만드는 동안 이러한 방법과 프레이머 모션의 후크를 자주 사용하게 됩니다.

1. 스크롤 진행률 감지(useScroll): 사용자의 스크롤 위치를 추적하며 일반적으로 페이지 아래의 진행률을 나타내는 0에서 1 사이의 값을 반환합니다.
   

   npx create-next-app@latest
   

2. 스크롤 데이터 변환(useTransform): 스크롤 위치를 불투명도, 크기 또는 위치와 같은 특정 애니메이션 속성에 매핑합니다. 스크롤하는 동안 페이드, 이동, 회전, 크기 조정 또는 색상 변경과 같은 애니메이션을 트리거하는 데 사용합니다.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. 모션 요소를 사용한 애니메이션: 대상 요소를 Motion.div(또는 모든 모션 구성 요소)로 래핑하고 애니메이션을 스크롤 진행 상황에 연결합니다.
   

     npm install framer-motion
   

4. 전환: 부드러운 전환을 적용하여 애니메이션을 부드럽고 자연스럽게 만듭니다.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. 초기 및 최종 상태: 초기, 애니메이션 또는 스타일 소품을 사용하여 요소가 처음에 어떻게 보이는지 정의하고 useTransform 또는 scrollYProgress에 연결된 애니메이션으로 최종 상태를 제어합니다.
   

       npm run dev
   

스크롤 진행률 표시줄

스크롤 진행률 표시줄을 만드는 것부터 시작하겠습니다. 이렇게 하려면 텍스트 편집기를 열고 새 구성요소를 만든 다음 그 안에 코드 작성을 시작하세요.

   const { scrollYProgress } = useScroll();

여기서는 다음을 사용했습니다.

• useScroll: 스크롤 위치를 0과 1 사이의 정규화된 값으로 제공합니다.

• useTransform: 진행 원의 획 대시 배열이든 적용하려는 다른 변환이든 상관없이 스크롤 진행 상황을 필요한 특정 값 범위에 매핑합니다.

• 모션 구성요소: Framer Motion의 Motion.circle을 사용하여 스크롤을 기반으로 실시간으로 스트로크 길이에 애니메이션을 적용합니다.

동적 크기 조정 텍스트 애니메이션

이 예에서는 Framer Motion을 사용하여 텍스트 요소에 스크롤 연결 동적 크기 조정 효과를 생성합니다.

1. 스크롤 진행률 추적: 진행률 표시줄과 유사하게 useScroll()을 사용하여 페이지의 현재 스크롤 진행률을 가져옵니다. scrollYProgress 값의 범위는 상단의 0부터 완전히 스크롤된 1까지입니다.
   

     66623306d58a1053688cd78dc392ea42
   
   

2. 스크롤 값을 배율 제어로 변환: useTransform()을 사용하여 스크롤 진행 상황을 사용자가 스크롤할 때 동적으로 변경되는 배율 값으로 변환합니다. 이 경우에는 scrollYProgress를 [0, 0.5, 1]에서 배율 값 [1, 2, 1]로 매핑합니다. 즉, 텍스트가 원래 크기에서 커지고 스크롤 중간에서 크기가 두 배로 늘어난 다음 축소됩니다. 바닥에 도달하면 다시 돌아옵니다.
   

   npx create-next-app@latest
   

3. 텍스트 요소 애니메이션: Motion.h1 구성 요소 내에서 스타일 속성에 scaleValue를 사용하여 스크롤 위치에 따라 텍스트 크기 조정 효과를 부드럽게 애니메이션화합니다. 사용자가 스크롤하면 텍스트가 "커진다" 및 "줄어듭니다".
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. 섹션 스타일 지정: 시각적 매력을 더하기 위해 배경 그라데이션이 있는 전체 화면 섹션의 중앙에 텍스트가 배치됩니다. 배경은 보라색에서 남색까지 부드러운 그라데이션을 만들어 역동적인 텍스트를 더욱 돋보이게 합니다.
   

     npm install framer-motion
   

사용된 개념:

• useScroll: 이 후크를 다시 사용하여 애니메이션의 트리거 역할을 하는 페이지의 스크롤 진행 상황을 추적합니다.

• useTransform: 여기에서는 스크롤 진행 상황을 배율 값에 매핑하여 스크롤 이벤트 중에 텍스트가 부드럽게 커지거나 줄어들도록 합니다.

• 모션 구성 요소: 모션 구성 요소인 Motion.h1은 스크롤 값이 변경됨에 따라 크기가 동적으로 조정되어 실시간으로 애니메이션됩니다.

또 같은 개념을 사용했습니다. useScroll useTransform 및 모션. 그럼 스크롤연결 부분입니다. 이제 스크롤 트리거 애니메이션

을 만들어 보겠습니다.

스크롤 트리거 애니메이션 만들기

스크롤 트리거 애니메이션은 몇 가지 예에서 작동하지 않습니다. 스크롤 애니메이션을 페이지의 특정 구성 요소에 연결할 수 있습니다. 예를 들어 두 개의 요소와 일부 텍스트가 포함된 div가 있는 랜딩 페이지가 있습니다. 현재 페이지에는 애니메이션이 없지만 뷰포트가 보일 때 활성화되는 애니메이션을 추가하고 싶습니다.

이를 위해 스크롤 트리거 애니메이션을 사용합니다. 앞서 배운 것처럼 스크롤 트리거 애니메이션은 특정 뷰포트가 표시될 때 발생합니다. 그럼 이 코드에 Framer Motion 요소를 추가해 보겠습니다.

  66623306d58a1053688cd78dc392ea42

1. framer-motion에서 모션을 가져옵니다

2. 전체 구성 요소가 섹션 요소로 둘러싸여 있으며 몇 가지 기본 스타일이 있습니다.

3. 67b4f758d01b5d98ed51f10e02fa8e80 첫 번째 모션 div입니다. 여기에는 주요 내용(제목 및 단락)이 포함됩니다. 스크롤 트리거 애니메이션을 생성하기 위해 초기화 및 whileInView를 사용합니다.

   initial={{ opacity: 0, y: 50 }}: 처음에는 상자가 보이지 않고(opacity: 0) 50픽셀 아래(y: 50)에 위치합니다.
   whileInView={{ 불투명도: 1, y: 0 }}: 사용자가 보기로 스크롤하면 완전히 표시되고(불투명도: 1) 일반 위치(y: 0)로 이동합니다.
   전환={{ 지속 시간: 0.8, 여유: 'easeOut' }}: 전환에는 0.8초가 걸리며 부드럽게 완화됩니다.

   내부 콘텐츠는 Tailwind 클래스로 스타일이 지정되어 패딩, 90% 불투명도의 배경, 그림자, 둥근 모서리 및 최대 너비를 제공합니다.

4. 그 다음에는 두 번째 모션 div(위에서 아래로 애니메이션 텍스트)가 있습니다. 이 67b4f758d01b5d98ed51f10e02fa8e80 화면 상단에서 아래로 이동하는 일부 텍스트에 애니메이션을 적용합니다.

   initial={{ y: -100, opacity: 0 }}: 텍스트가 정상 위치보다 100픽셀 위에서 시작하며 보이지 않습니다.
   whileInView={{ y: 0, opacity: 1 }}: 시야에 들어오면 정상 위치로 이동하여 완전히 보입니다.
   Transition={{ Delay: 0.5, Duration: 0.8 }}: 애니메이션이 시작되기 전에 0.5초의 지연이 있어 시차를 두는 효과를 줍니다.

최종 출력은 다음과 같습니다.

결론

오늘의 블로그는 여기까지입니다. useScroll useTransition whileInView 초기 및 최종 상태 등과 같은 애니메이션을 생성하는 동안 사용되는 몇 가지 방법으로 2가지 유형의 애니메이션을 다룹니다.

더 많은 애니메이션 샘플이 포함된 모든 코드를 StalkBliz 프로젝트에 추가했습니다. 여기에서 확인하고 코드가 포함된 더 많은 샘플 스크롤 애니메이션을 볼 수 있습니다. 더 많은 소품, 방법 및 스크롤 애니메이션의 예를 살펴보려면 여기에서 Framer Motion의 스크롤 문서를 확인하세요.

이 블로그를 읽어주셔서 감사합니다. 이를 통해 무엇인가를 배웠다면 좋아요를 누르고 친구와 커뮤니티와 공유해 주세요. 저는 JavaScript, TypeScript, 오픈 소스 및 기타 웹 개발 관련 주제에 대한 블로그를 작성하고 콘텐츠를 공유합니다. 내 소셜 미디어에서 나를 팔로우하세요. 다음 편에서 뵙겠습니다. 감사합니다 :)

• 트위터
• 링크드인
• 깃허브

위 내용은 Framer Motion을 사용하여 아름다운 스크롤 애니메이션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!