# framer-motion

83개의 포스트
post-thumbnail

CSR 페이지 전환 모션 (Recat Router v6.4)

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

5일 전
·
0개의 댓글
·
post-thumbnail

[Framer Motion] React 모션 라이브러리

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

2023년 11월 21일
·
0개의 댓글
·
post-thumbnail

ShareIT 회고록 및 느낀점(2023.07.28 ~ 2023.11.10)

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

2023년 11월 16일
·
0개의 댓글
·
post-thumbnail

Nested Draggable Component with Drag-chaning

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

2023년 11월 10일
·
0개의 댓글
·
post-thumbnail

Nested Draggable Components(using framer motion)

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

2023년 11월 7일
·
0개의 댓글
·

Framer Motion의 Custom 속성을 활용한 동적 애니메이션 구현

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

2023년 10월 21일
·
0개의 댓글
·
post-thumbnail

[리액트 마스터 클래스] framer-motion을 활용한 animation(1)

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

2023년 10월 5일
·
0개의 댓글
·
post-thumbnail

framer-motion과 Flubber를 이용해 우아한 svg 애니메이션 만들기

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

2023년 9월 10일
·
0개의 댓글
·

9/7 TID : Framer-motion, Astro 할것인가 말것인가

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

2023년 9월 7일
·
0개의 댓글
·
post-thumbnail

React Bottom Sheet

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

2023년 8월 30일
·
0개의 댓글
·
post-thumbnail

React Music Progressbar (1)

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

2023년 8월 25일
·
0개의 댓글
·
post-thumbnail

React Marquee Text with interval

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

2023년 8월 23일
·
0개의 댓글
·
post-thumbnail

React animation library: Framer-motion

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

2023년 8월 1일
·
1개의 댓글
·
post-thumbnail

OTT 검색 서비스: Wherewatch - (5)Coverflow(or Carousel?) 구현기

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

2023년 7월 28일
·
1개의 댓글
·
post-thumbnail

Front-end 도구 및 라이브러리 정리

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

2023년 7월 23일
·
0개의 댓글
·
post-thumbnail

OTT 검색 서비스: Wherewatch - (4)Framer Motion + React Router v6 Nested / Page Transition

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

2023년 7월 22일
·
0개의 댓글
·

OTT 검색 서비스: Wherewatch - (3)Framer Motion dragConstraints 버그

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

2023년 7월 21일
·
1개의 댓글
·
post-thumbnail

DND를 위해 touch event 비활성화 하기

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

2023년 6월 29일
·
0개의 댓글
·
post-thumbnail

[framer motion] DND 하는 동안 아이템 스타일 조작하기

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

2023년 6월 26일
·
0개의 댓글
·