# framer-motion

ksr20612

svg animation Rockie Talkie ] 를 비롯한 React 기반의 개인 프로젝트에서 [🔗 framer-motion을 사용하고 있습니다. 간결하지만 강력하고 확실한 기능을 보장하기 때문입니다. Framer-motion이 제공하는 독특한 기능 중 하나로 와 의 조합을 꼽을 수 있는데요, 선언적인 형태로 애니메이션 조작할 수 있다는 점에서 주목할 만합니다(애니메이션이라는 특성상 완전히 선언적일 수는 없지만요). 이 글에서는 framer의 motionValue와 useTransform, flubber의 조합을 통해 구현하기 어려운 s

thewronghand

열심히 안하나요? 죄송합니다... 오늘 한 걸 읊어보시오 오늘은~ 지금 만들고 있는 걸 갈아엎고 Astro로 새로 시작할까 고민함 Astro 공식문서 읽기 Astro 관련 블로깅 찾아보기 Astro 활용 예제 찾아보기 Grid 학습 grid를 활용해 미디어 쿼리 없이 반응형 레이아웃 구현하기 Framer-motion Framer-motion으로 포트폴리오에 애니메이션 효과 추가하기 Nav와 Nav 아이템에 initial, exit 애니메이션 추가 열리면 x자로 변하는 햄버거 버튼 만들기 새로 만든 컴포넌트에 다크모드 적용하기 트러블슈팅... 한 게 별로 없군요!!! Astro Astro를 써보는 게 어떻냐는 의견을 받았습니다. Astro가 뭔데요? Astro란? Astro는 아일랜드 아키텍처를 활용한 멀티 프레임워크 정적 사이트 빌더(SSG)입니다. 대체 어떻게

sangpok

Bottom Sheet? Drawer? 부르는 명칭이 정확하진 않지만 머 여튼 이런 식으로 하단에 위치해있고, 드래그를 하면 추가적인 정보를 확인할 수 있는 UI를 일컫는다. 보통 모바일 앱에서 많이 사용하는 UI! 이번에도 역시 많은 삽질을 했다 ... 😇 차근차근 구현 과정을 기록해보겠다. 0. 구조 및 스타일 잡기 나는 다음과 같이 구조를 잡았다. Back Layer는 배경으로 깔릴 View을 말한다. 여기에 BackgroundOverlay 같은 걸 깔아서 후처리를 해주려고 했는데,, 이것도 후에 서술. Header는

sangpok

리액트에서 음악 재생바를 만들 일이 있어서 만들어 보았다. 은근 신경써야 할 부분들이 많아서 재밌었던 개발! 일단 슥슥 생각나는 대로 작성한 거라 코드가 꽤나 많이 복잡하다. 코드는 정리해서 따로 올려보도록 해야겠다. 개발 포인트 보기엔 쉬워보였는데 디테일한 UX들이 많아서 꽤나 생각할 게 많았다. Buffer를 포함한 터치 포인트 자세히 보면 ProgressBar 자체가 아니라 위 아래로 buffer만큼 선택 범위가 확장된 것을 볼 수 있다. ProgressBar 크기 자체가 워낙 작다 보니까 정확하게 그 지점을

sangpok

리액트에서 마퀴를 구현할 상황이 생겨서 간단하게 구현해보았다. 구현내용 내가 원하는 효과는 다음과 같았다. 오른쪽에서 왼쪽으로 흘러가는 마퀴 일정한 간격을 두고 반복되는 텍스트가 등장 뒤따라오는 텍스트가 맨 왼쪽에 다다르면 3초간 인터벌 다시 애니메이션 Package 설치 필요한 package들은 다음과 같다. 구현 스타일 파일과 로직 파일을 구분해서 구현하였다. MarqueeText.styled.tsx MarqueeText.tsx 주요 포인트는 아래와 같다. useAnimationFrame 요 Hooks은 Framer Motion에서 제공하는 Hook인데, 잘은 모르겠지만 javascript에서 제공하는 `request

singsoong

🔎 Framer-motion CSS를 사용하여 썸네일과 같은 애니메이션을 구현하려면 정말 많은 시간이 필요하다. Framer-motion은 React로 개발된 animation library이다. Framer-motion은 Typescript를 지원하며, 최적화된 성능 및 풍부한 API를 제공한다 러닝커브가 타 animation 라이브러리에 비해 낮고 커스텀에 용이 📌 Installation 📌 Usage 📄 Declaration styled-components or Basic Animation 📄 Variants 📄 Orchestration delayChildren: 모든 자식들에게 delay 거는 속성 staggerChildren: 각 자식마다 순차적으로 실행할 때 사용하는 속성 whileHover, whileTap과 같은 props를 사용하여 특정 조

sangpok

화면 설계할 때 나름 포인트로 잡았던 게 인물 페이지의 프로필 사진 슬라이드였다. 뭐.. 어떻게든 만들겠지! 하고 대책없이 했던 건데, 막상 구현하려고 하니 과거의 나를 때리고 싶었다... 일단 완성본은 다음과 같다. 내가 만든 Carousel 사랑해요 김다미 얼추 관련해서 검색해봤을 때 나와있는 포스팅들이 많아서 금방 만들겠다 생각했는데, 은근 내가 원하는 효과는 없었다. 내가 원했던 효과는 다음과 같다. (1) 드래그 기능 : 버튼을 눌러서 넘기는 형식이 아니라 드래그를 통해 사진을 넘길 수 있어야 했다. (2) 한 스와이프당 하나씩만 : 마우스가 드래그하는 만큼 움직이는 것이 아니라 드래그 한 번당 스와이프

just-do-justin

스타일링 라이브러리 Emotion Emotion은 JavaScript를 사용하여 CSS 스타일을 관리하는 라이브러리로, React와 다른 프레임워크에서 사용할 수 있습니다. Emotion은 CSS-in-JS 스타일링 방식을 채택하여, 컴포넌트와 함께 스타일을 선언하고 적용할 수 있습니다. CSS-in-JS 방식 중 하나인 "Styled Components"와 유사한 기능을 제공합니다. CSS-in-JS: Emotion은 JavaScript 코드 안에서 CSS 스타일을 작성할 수 있도록 해주는 방식으로, 스타일과 컴포넌트를 함께 관리할 수 있습니다. 퍼포먼스: Emotion은 빠른 런타임 성능을 제공하며, 스타일을 최적화하여 불필요한 렌더링을 방지합니다. 스타일 재사용: Emotion은 스타일을 JavaScript 객체로 추상화하여 재사용성을 높여줍니다. Framer-motion Framer Motion은 모션 그래픽 및 애니메이션을 구현하기 위한

sangpok

구현 사항 React Router v6을 쓰면서 중첩 라우팅을 구현하고, 거기에 페이지 전환 애니메이션도 넣으려고 하는 상황. 이때, 같은 경로를 쓰면서 다른 컴포넌트를 보여주는 페이지도 있다. 같은 경로를 쓰는 이유는 따로 경로로 쓰는 것이 아니라 화면 뷰를 바꾸는 것이 더 낫겠다는 생각이었다. 따라서 다음과 같이 구성하였다. 또한, detail 페이지를 제외한 나머지 화면엔 공통으로 들어가는 Header가 존재한다. 이 Header의 검색박스에 접근하면 화면 뷰가 검색 모드로 변환된다. 이 모드는 경로가 /일 때든, /search 일 때는 둘 다 작동하게끔 한다. 경로 /에선 Outlet에 LandingView가 보여야 하고, isSearchMode가 되면 SearchModeView가 보여야 한

sangpok

오늘도 억까 당해버렸다 ... 문제 상황 이미지 슬라이드를 만드는 도중에, 화면 Resizing에 따라서 dragConstraints가 변해야 하는 상황이 있었다. 제약을 자식 이미지 크기만큼 걸어야 해서 다음과 같이 코딩을 했다. useEffect(() => {}, [])는 DOM에 다 그려진 뒤 호출이 되니까 slideRef에 값이 들어간 상태이다. 거기에서 scrollWidth에서 clientWidth를 빼주면 제약크기가 되니까, 그걸 childrenWidth에 넣어준다. 그러면~ 밑에 dragConstraints에서 childrenWidth를 쓰고 있으니 렌더링이 진행될 것이다. ..라고 생각하고 코드를 짠 거였는데, 작동을 하지 않았다. childrenWidth의 값도 잘 계산되는 걸 확인했는데도 적용이 안 됐다. 어디까지 생각해봤냐면 저기 속성에 던져주는 게 객체라서, 새로운 객체로 변한 걸 감지를 못 했나까지 의심하기 시작했지 뭐람(삽질의 시작ㅋㅋ) 아므

sumi-0011

문제 상황 기존에 framer motion의 Reorder 컴포넌트를 이용해서 DND를 구현하고, 동작되는 것을 확인해보았었다. 그런데 어느 순간 개발 모드에서 동작하지 않는 것을 발견하였다. 우리는 스토리북 또한 쓰고 있어서 스토리북을 확인해 보았는데 스토리북에서는 정상적으로 동작했다. 그럼 뭐가 문제지..? 문제 발견 내가 크롬 환경에서 mobile 화면으로 테스트하기 위해 모바일 모드로 개발을 하고있었다. 모바일 모드일 때는 PC에만 있는 pointer 이벤트가 없어지고, touch 이벤트만 동작한다는 것을 간과했던 것이다. 실제로 PC화면을 확인해보니 정상적으로 돌아가고 있었다. ![](https://velog.velcdn.com/images/sumi-0011/

jihyeonjeong11

NextJS로 첫 사이드프로젝트를 하면서 Next-Themes가 정말로 편했었던 기억이 있는데, 역시 이번에서도 넣어보기로 했다. Next-Themes 적용 문제는 Next-Themes는 프로바이더 기능을 사용하기 때문에, 이전에 확인했던 대로 layout.tsx(서버) -> provider.tsx(next-themes 래퍼client) -> children으로 추가적인 조치를 해 주어야 했다. Tailwindcss로 다크모드 적용하기 위의 코드를 tailwindcss를 사용한 컴포넌트단에서는 이렇게 사용할 수 있다. dark:를 입력한 클래스는 다크모드일때 (color-scheme: dark), 아니라면 그냥 클래스가 적용된다. 이러한 류의 라이브러리가 그렇듯, 이런식

sumi-0011

drag and drop을 구현할 때, 드래그 하는 아이템을 직관적으로 보여주기 위해 box-shadow, background-color를 조작해보자 시작 코드 > 참고 링크 List.tsx DNDItem.tsx 드래그하는 아이템의 스타일 변경하기 step 1 : 드래그 감지하기 드래그하고있는 아이템의 스타일을 변경하기 위해, 가장 먼저 드래그 상태인지를 추적해야한다. onDragStart, onDragEnd 이벤트를 통해 이벤트 동작 시작, 끝을 감지한다. 2. motion value를 생성한다. framer-motion 라이브러리는 motionValue를 제공한다. > motionValue가 : motion의 value 즉 움직임에 대한 database > 사용 이유 > 1. motionValue가 변수처럼 작용한다

sumi-0011

drag and drop 기능를 framer motion 라이브러리의 Reorder 컴포넌트를 이용하여 간편하게 구현할 수 있다. Reorder를 이용해서 Drag and Drop 구현하기 기본적인 사용법 Reorder.Item : 드래그 될 컴포넌트 Reorder.Group : 드래그 될 컴포넌트를 감싸는 Container Reorder.Item 컴포넌트들을 Reorder.Group 컴포넌트로 감싸고, Reorder.Group 컴포넌트에 드래그 리스트를 제어하는 setItems메소드를 넘겨주면 알아서 드래그에 따라 컴포넌트의 순서를 재배치해준다. > 참고 : https://www.framer.com/motion/reorder/ y축으로만 드래그 가능하도록 하기 Reorder.Item 컴포넌트에 drag="y"을 주면 컴포넌트를 y축으로만 드래그 가능하도록 할 수 있다. 반대로, `drag="x

sumi-0011

framer motion 라이브러리와 Portal 컴포넌트를 사용하여. body 태그의 자식으로 애니매이션 dom을 렌더링 하는 AnimationPotal 컴포넌트를 생성해보자. AnimationPotal 컴포넌트 구현에는 Portal 컴포넌트와 framer-motion의 AnimatePresence이 필요하다. > AnimatePresence > [Portal 컴포넌트 관련 링크](https://velog.io/@su

jihyeonjeong11

저번 주 React Essentials에서 보았듯, 클라이언트 컴포넌트가 아닐 때, 리액트 라이프사이클을 적용하면 에러가 난다. 만들어 보고 싶은것은 위의 애니메이션을 framer motion으로 적용하는 레이아웃인데, 가장 간단한 방법은 위 모든 컴포넌트들을(상단 navBar, 왼쪽 오른쪽 fixed 메뉴 모두) use client로 만들어버리면 아무 문제가 없을 것 같다. 하지만, nextJS의 기본 개념과는 맞지 않다고 생각하므로: client components는 반응성이 있거나, 리액트 라이프사이클을 사용하는 경우 server components는 반응성이 없고 고정된 밸류만을 표시하는 static한 경우 위 상술한 튜토리얼을 바탕으로 먼저 적용해 보았다. ![](http

ebing

Overview Framer Motion is a simple yet powerful motion library for React. It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed. In this quick overview, we'll take a look at some of the APIs that Motion offers. Framer-motion 라이브러리 기본 사용법 1 보러가기 두 번째로 쓰는 Framer-motion 라이브러리 글이다. 사용할 수 있는 기능이 많아서 글을 여러 개로 나누게 되었는데, 이번 글에서는 AnimatePresence 와 exit 애니메이션 적용하는 방

ebing

Overview Framer Motion is a simple yet powerful motion library for React. It powers the amazing animations and interactions in Framer, the web builder for creative pros. Zero code, maximum speed. In this quick overview, we'll take a look at some of the APIs that Motion offers. Framer-motion 이번 프로젝트에서 Framer-motion 라이브러리로 웹사이트에 애니메이션 효과를 적용했다. React 버전은 17.0.2 를 사용했고, Framer-motion 은 해당 React 버전과 호환되는 6.5.1 버전을 사용했다. 아무래도 최근에 나온

jhjung3

최근에 토스트 메시지를 개발해야할 일이 있어서 Implementing animated toasts in React를 참고하여 새롭게 컴포넌트를 만들었는데, 이를 다시 정리해보려고 한다. 결과물은 다음과 같다. 프로젝트 생성 먼저 Typescript 기반의 React 프로젝트를 생성하자. 라이브러리 설치 Framer motion, Recoil 라이브러리를 설치해주자. 스타일링은 별도의 라이브러리 없

kkyes1210

✍8.10 SVG Animation 📎https://fontawesome.com/ ✅fill="currentColor" 일 때 path는 svg의 color를 쓰게 된다. ✅pathLength는 현재 우리 위치까지의 path의 길이 마지막으로 특정 property의 animation duration을 단독으로 변경하는 방법을 알아보자. pathLength가 0에서 1로 가는것, fill의 opacity가 0에서 1로 가는 것 모두 5초가 걸린다. 위 코드와 같이 transition: {duration:5} 로 작성했기 때문에 똑같이 5초가 걸리게 되는것인데, 이를 수정해보자. 직접적으로 어떤 property를 어떻게, 얼마나 animation 할 지 특정할 수 있는 것이다. default는 모든 propery에 적용되는 값이라고 생각하면 된다🤣 ✍8.11 AnimatePresence `AnimatePre