✏️ Framer-motion 애니메이션 라이브러리

 

이번 프로젝트에서 스크롤 애니메이션 요소를 추가하면 홈페이지가 더 멋지게 보일 것 같아
스크롤 애니메이션 라이브러리를 찾아서 사용해보기로 했다.
여러가지 애니메이션을 지원하는 라이브러리가 있는데,
가장 직관적이고 Docs가 잘 나와있는 framer motion 라이브러리를 찾게 되었다. 
 
 

 

해당 라이브러리 설치

npm install framer-motion

 

스크롤 애니메이션 이외에도 버튼,모달,스크롤,화면 전환 등
여러가지 요소에 애니메이션을 삽입할 수 있다.
나는 스크롤 애니메이션이 주 목적이었기 때문에 스크롤 애니메이션만 추가해보기로 했다.
 
 

스크롤 애니메이션

스크롤 애니메이션 중, 2가지의 유형이 있다

• 스크롤 링크(Scroll-linked) - 스크롤 진행 상황이 애니메이션 진행 상황과 연결
• 스크롤 트리거(Scroll-triggered) - 요소가 뷰포트에 들어오거나, 나갈 때 애니메이션 트리거

나는 여러가지 스크롤 애니메이션 중 Spring smoothing을 써보기로 했다.

useScroll 훅을 사용하여 구현할 수 있다.

 
 

예시 코드

import { motion, useScroll } from "framer-motion"

function Component() {
  const { scrollYProgress } = useScroll();
  
  return (
    <motion.div style={{ scaleX: scrollYProgress }} />  
  )
}

 

useScroll 훅

scrollX, scrollY : 절대적인 위치 값,

scrollXProgress, scrollYProgress : 오프셋 사이 스크롤 값 (0~1)

 

 

motion.div와 같이, motion 키워드를 붙여준다.

이렇게 모션 키워드가 붙은 요소는 motion component이다.

스크롤이벤트는 useScroll훅을 불러와서 스크롤의 상태와 속도를 추적한다.
사용자가 스크롤을 내릴 때, 해당 스크롤에 따라 scaleX축이 올라간다.
 
 
 
 

해당 라이브러리 링크

framer-motion

 
 

라이브러리 Docs

Scroll animations | Framer for Developers

 

 

 

 

 

 

다음 포스팅 - 우리 프로젝트에 적용해보기

IceCraft - Info페이지 리팩토링 : 애니메이션 라이브러리 추가하기