framer-motion써보기

framer-motion

리액트용 애니메이션 라이브러리로 다양한 애니메이션들을 작용할수 있게 도와주는 라이브러리다.

framer-motion 설치

$ npm i framer-motion

import { motion } from "framer-motion"

이런 식으로 임포트를 해주면 끝이다.

  <motion.div 
              className="md:-mt-20"
              initial="hidden"
              whileInView="visible"
              viewport={{ once : true, amount:0.5 }}
              transition={{duration: 0.5}}
              variants={{
                hidden:{ opacity:0, x:-100 },
                visible: { opacity:1, x:0 }
              }}
              >
              <div className="relative">
![](https://velog.velcdn.com/images/yangth/post/856926ee-9ed1-479f-8097-253ecbad7bc4/image.gif)
                <div className="before:absolute before:-top-20">
                  <img alt="home-page-text" src ={HomePageText}/>
                </div>
              </div>
              
              <p className="mt-8 text-sm">
              Unrivaled Gym. Unparalleled Training Fitness Classes. World Class
              Studios to get the Body Shapes That you Dream of.. Get Your Dream
              Body Now.
              </p>
            </motion.div>
            
            

공부를 하면서 작성한 코드이다.

작동은 새로고침하면 왼쪽에서 오른쪽으로 슬라이드하면서 선명해지는 모션이다.

https://www.framer.com/docs/introduction/

이곳은 공식 홈페이지다 이곳에서 공부해보면서 더 익혀봐야겠다.

사용후 느끼는 장점

사용하기 편리하다는게 가장 큰 장점

css의 어느정도에 익숙하다면 조금만 공부해도 괜찮은 애니메이션 효과를 낼수 있다는게 장점같다.