[Framer motion] Layout
·
React/Interactive
Motion의 Layout animation은 어떠한 CSS property도 transitionable 하게 만들 수 있습니다.예를 들어 flex-direction이나 grid-template-columns 같은 경우 transition을 적용할 수 없지만 motion의 layout을 사용하면 transition을 적용할 수 있습니다. ayout prop은 justify-content, flex-start, flex-end등 애니메이션 적용이 불가능한 css value를 애니메이션이 가능하도록 만들어줍니다.import {motion} from 'motion/react'사용법어떠한 layout change도 리엑트를 리렌더링 시키기만 한다면 애니메이션을 적용할 수 있습니다.css 변경 사항은 animat..
[Framer motion] 기본 사용법
·
React/Interactive
Motion (Framer motion)은 브라우저의 하드웨어 가속을 사용한 애니메이션과 자바스크립트 애니메이션 둘 다 사용하여 구현된 애니메이션 라이브러리입니다.사용법기본적인 사용법기본적인 사용법은 Motion 라이브러리에서 제공하는 Dom element을 확장한 element를 사용합니다.import {motion} from 'motion/react' 애니메이션을 추가하려면 animate prop를 넘깁니다.import {motion} from 'motion/react' 초기 상태 애니메이션애니메이션의 초기 상태를 정의하려면 initial prop을 넘깁니다.import {motion} from 'motion/react' 초기 진입 에니메이션을 설정하지 않으려면 initial에 false를 넘깁니다...