# framer-motion

hongkyu_mr_chu

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

kldream

React 모션 라이브러리인 Framer Motion을 알아보자!

k_gu_wae123

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

sangpok

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

sangpok

겹쳐져 있는 상태의 드래그 컴포넌트를 다뤄야 할 상황이 생겼다. 좀 더 구체적으로는 다음과 같은 상황이다.콘텐츠 영역 안에 가로로 드래그가 가능한 컴포넌트가 존재하고, 그 위로는 세로로 드래그가 가능한 부모가 존재하는 상황이다. 예를 들면 인스타그램과 같은 느낌! 피드

sarang_daddy

React에서 Framer Motion 라이브러리로 애니메이션 효과를 적용하던 중 의도치 않은 버그가 발생되었다. 어떻게 버그가 해결되었는지 그리고 왜 이런 버그가 발생했는지 기록하고 정리해보자.

orangetree401

framer-motion을 활용하여 데모에 있는 간단한 애니메이션을 직접 만들어보며 연습해보자!🔗 https://www.framer.com/motion/drag: drag 적용하기drag="x": x축에서만 drag 가능drag="y": y축에서만 drag

ksr20612

motionValue와 useTransition, flubber를 이용해 자연스러운 svg 애니메이션을 구현해보았습니다.

thewronghand

죄송합니다...오늘은~지금 만들고 있는 걸 갈아엎고 Astro로 새로 시작할까 고민함Astro 공식문서 읽기Astro 관련 블로깅 찾아보기Astro 활용 예제 찾아보기Grid 학습grid를 활용해 미디어 쿼리 없이 반응형 레이아웃 구현하기Framer-motionFram

sangpok

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

sangpok

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

sangpok

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

singsoong

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

sangpok

Wherewatch 개발일지(5) / Coverflow UI Component

just-do-justin

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

sangpok

Wherwatch 개발일지(4) / React Router + Framer-motion을 이용한 Page Transition

sangpok

Wherewatch 개발일지(3) / Framer-motion dragConstraints 버그

sumi-0011

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

jihyeonjeong11

12

sumi-0011

drag and drop을 구현할 때, 드래그 하는 아이템을 직관적으로 보여주기 위해 box-shadow, background-color를 조작해보자.