영상: https://www.youtube.com/watch?v=wvINSME-FMs
작은 용량으로 좀더 웹페이지를 블링 블링 하게 만들 수 있습니다.
좋은 라이브러리 같습니다.
개발문서: https://motion.dev/docs/vue
Get started with Motion for Vue | Motion for Vue
Get started with Motion for Vue with our installation guide and interactive examples.
motion.dev
문서에는 NUXT 를 언급하는데 그런거 필요없고
import {motion} from "motion-v"
랑
<motion.button
:while-hover="{ scale: 2.0 }"
:while-press="{ scale: 0.5 }"
>
my button
</motion.button>
이런식으로 div 대신에 쓰는 방식으로 바로 적용가능합니다.
아주 블링블링한 페이지를 만들 수 있습니다.
예시:
활용한 샘플 데모
링크: https://examples.motion.dev/vue
Motion Examples - Official Motion and Framer Motion components & examples
Framer Motion is now Motion. Official examples of how to use Motion, including scroll animations, layout animations, keyframes, springs and more. View and copy source code for components and tests. Learn which APIs are used and link through to the source d
examples.motion.dev
이페이지 가시면 다양한 샘플들을 보실 수 있습니다.
고급 사이트에서 볼 수 있는 버튼 / 탭 매뉴 연출 / 팝업 / 들레그 바 등등을 보실 수 있습니다.