# framer-motion

CSR 페이지 전환 모션 (Recat Router v6.4)
안녕하세요 이 글에서는 리액트 라우터 돔v6.4 createBrowserRouter에서 페이지 전환시 어떻게 framer-motion의 exit를 활용하는지 이야기 해보려 합니다. _ Exit animations AnimatePresence works by de

ShareIT 회고록 및 느낀점(2023.07.28 ~ 2023.11.10)
Git : https://github.com/KimKyuHoi/ShareIT-Frontend picktre 프로젝트 회고록을 쓴 이후 오랜만인거 같다. 뭔가 프로젝트를 진행하고 배운점에 대해서 꼭 써야지 하다보니 쓰는 기간이 늘어나는 것 같다.

Nested Draggable Component with Drag-chaning
이전 포스트에서 중첩된 상태에서의 컴포넌트 드래그를 구현했었는데, 막상 사용하려고 보니 한 케이스를 생각하지 못했다. 바로 같은 축을 가지는 중첩 상태가 있는 것. 그러니까, 부모도 Y 드래그고 자식도 Y 드래그인 상태를 생각하지 못했다(...) 하지만 뭐 그렇다

Nested Draggable Components(using framer motion)
겹쳐져 있는 상태의 드래그 컴포넌트를 다뤄야 할 상황이 생겼다. 좀 더 구체적으로는 다음과 같은 상황이다.콘텐츠 영역 안에 가로로 드래그가 가능한 컴포넌트가 존재하고, 그 위로는 세로로 드래그가 가능한 부모가 존재하는 상황이다. 예를 들면 인스타그램과 같은 느낌! 피드
Framer Motion의 Custom 속성을 활용한 동적 애니메이션 구현
React에서 Framer Motion 라이브러리로 애니메이션 효과를 적용하던 중 의도치 않은 버그가 발생되었다. 어떻게 버그가 해결되었는지 그리고 왜 이런 버그가 발생했는지 기록하고 정리해보자.

[리액트 마스터 클래스] framer-motion을 활용한 animation(1)
framer-motion을 활용하여 데모에 있는 간단한 애니메이션을 직접 만들어보며 연습해보자!🔗 https://www.framer.com/motion/drag: drag 적용하기drag="x": x축에서만 drag 가능drag="y": y축에서만 drag

framer-motion과 Flubber를 이용해 우아한 svg 애니메이션 만들기
motionValue와 useTransition, flubber를 이용해 자연스러운 svg 애니메이션을 구현해보았습니다.
9/7 TID : Framer-motion, Astro 할것인가 말것인가
죄송합니다...오늘은~지금 만들고 있는 걸 갈아엎고 Astro로 새로 시작할까 고민함Astro 공식문서 읽기Astro 관련 블로깅 찾아보기Astro 활용 예제 찾아보기Grid 학습grid를 활용해 미디어 쿼리 없이 반응형 레이아웃 구현하기Framer-motionFram

React Bottom Sheet
Bottom Sheet? Drawer? 부르는 명칭이 정확하진 않지만 머 여튼 이런 식으로 하단에 위치해있고, 드래그를 하면 추가적인 정보를 확인할 수 있는 UI를 일컫는다. 보통 모바일 앱에서 많이 사용하는 UI! 이번에도 역시 많은 삽질을 했다 ... 😇 차

React Music Progressbar (1)
리액트에서 음악 재생바를 만들 일이 있어서 만들어 보았다. 은근 신경써야 할 부분들이 많아서 재밌었던 개발! 일단 슥슥 생각나는 대로 작성한 거라 코드가 꽤나 많이 복잡하다. 코드는 정리해서 따로 올려보도록 해야겠다. 개발 포인트 보기엔 쉬워보였는데 디테일한 UX

React Marquee Text with interval
리액트에서 마퀴를 구현할 상황이 생겨서 간단하게 구현해보았다. 내가 원하는 효과는 다음과 같았다.오른쪽에서 왼쪽으로 흘러가는 마퀴일정한 간격을 두고 반복되는 텍스트가 등장뒤따라오는 텍스트가 맨 왼쪽에 다다르면 3초간 인터벌다시 애니메이션필요한 package들은 다음과

React animation library: Framer-motion
React animation library인 Framer-motion이 제공하는 여러 기능들을 사용해보자.

OTT 검색 서비스: Wherewatch - (5)Coverflow(or Carousel?) 구현기
Wherewatch 개발일지(5) / Coverflow UI Component

Front-end 도구 및 라이브러리 정리
스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고

OTT 검색 서비스: Wherewatch - (4)Framer Motion + React Router v6 Nested / Page Transition
Wherwatch 개발일지(4) / React Router + Framer-motion을 이용한 Page Transition
OTT 검색 서비스: Wherewatch - (3)Framer Motion dragConstraints 버그
Wherewatch 개발일지(3) / Framer-motion dragConstraints 버그

DND를 위해 touch event 비활성화 하기
기존에 framer motion의 Reorder 컴포넌트를 이용해서 DND를 구현하고, 동작되는 것을 확인해보았었다.

[framer motion] DND 하는 동안 아이템 스타일 조작하기
drag and drop을 구현할 때, 드래그 하는 아이템을 직관적으로 보여주기 위해 box-shadow, background-color를 조작해보자.