framer-motion (3) 썸네일형 리스트형 [React, framer-motion] 언마운트 대상 DOM 요소에 애니메이션 적용하기 with AnimatePresence 아래와 같은 360도 캐러셀을 개발하려면, 자바스크립트를 사용해아 한다. HTML 삽입 미리보기할 수 없는 소스 주로 react-slick을 사용할 것이다. 이러한 완성형 라이브러리들의 단점은 다음과 같다. UI 기능이 필요할 때마다 하나하나 깔다보면 라이브러리 갯수가 많아진다 masonry calendar carousel date-picker 등등... 스타일 커스터마이징이 어렵다. JS는 몇줄 안되는데 파일 하나가 CSS 조정하는데 다 쓰인다. (ex: MUI) 본인의 경우 해당 링크의 캐러셀과 유사하지만, 가운데로 오면 크기도 바뀌고, 컴포넌트도 바뀌는 캐러샐을 구현할 일이 있었다. 이런 캐러셀을 React-Slick만으로 구현하는건 쉽지 않을 것이다. 또한 이런 라이브러리들에 강제로 컴포넌트를 끼.. 프레이머 모션[framer motion] 기초 2부 : 레이아웃 애니메이션 이번에 배울 것 여러 컴포넌트에 애니메이션 전파하기 복잡한 레이아웃 에니메이션 오케스트레이션(조정 및 통합) Propagation (애니메이션 전파) 부모 컴포넌트의 variant 변경을 자식 컴포넌트에 알림 카드와 레이블을 덮고 있는 "보이지 않는" 모션 레이어가 있습니다. 이 레이어는 "hover" variant를 설정하는 whileHover 소품을 보유합니다. "글로우" 자체도 컴포넌트이지만 정의하는 유일한 것은 호버 키가 있는 자체 variant 객체입니다. 보이지 않는 레이어가 "hover"되면 hover variant를 토글하고 hover variant가 prop에 정의되어 있는 모든 하위 모션 컴포넌트는 이 변경 사항을 감지하고 해당 동작을 토글합니다. const CardWithGlow = .. 프레이머 모션[Framer Motion] 기초 1편 : 생기초 알아보기 원문 보기 https://blog.maximeheckel.com/posts/guide-animations-spark-joy-framer-motion/ Guide to creating animations that spark joy with Framer Motion - Maxime Heckel's Blog An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built. blog.maximeheckel.com 아래에서 다루는 예제들 원문은 영어로 읽는데 20분 정도 걸리는 상당한 분량입니다. 내용을 거의 3분 분량.. 이전 1 다음
