Frontend/Framer Motion3 [Framer Motion] 메뉴바 애니메이션 0. 개요 이번에 다루는 것은 framer-motion을 활용해서 위와 같은 메뉴바를 구현하는 방법이다.지금 만들고 있는 내 포트폴리오의 Header에 이를 적용하기 위해서 구현 방법을 공부해봤고 실제로 이를 구현하는데 성공하였고, 나중을 위해서 구현하는 과정을 블로그에 정리해두기로 하였다.1. 구현 과정예제 코드와 실행 예시는 다음과 같다. import {styled} from "styled-components";import {motion} from "framer-motion";import {useState} from "react";interface I_ItemData { ItemId: string; ItemNm: string;}const Wrapper = styled.div` widt.. 2025. 8. 5. [Framer-motion] Drag and Drop 목차1. Reorder_① _② 2. Drag and Drop 예제_① 예제 1 (Framer-motion / Reorder 기능 활용한 버전)_② 예제 2 (Reorder 사용하지 않고, DnD 구현)📔 Reference이번에 공부한 것은 Framer-motion 라이브러리의 Reorder라는 기능을 활용해서아래와 같은 Drag and Drop 애니메이션을 구현해보는 방법에 대해 공부해봤다. 위의 예시는 실제로 Framer-motion의 Reorder 기능을 활용해서 만든 DnD 예제이다.예제에 대한 설명에 들어가기 앞서서, Reorder에 대한 설명부터 하겠다.1. ReorderFramer Motion의 Reorder는 드래그되는 목록을 만드는데 사용할 수 있는 컴포넌트로과 두 가지 컴포넌트를 사.. 2025. 4. 30. Framer Motion 맛보기 1. Framer Motion2. motion props ① props: animate ② props: initial ③ props: transition 3. Variants ① Variants의 정의 ② Variants 예제, Part 1 ③ Orchestration ④ Variants 예제, Part 24. Drag1. Framer MotionFramer Motion은 React에서 Animation 효과들을 쉽게 구현할 수 있게 해주는 라이브러리로아래 이미지처럼 Netflix 같은 데에서 사용되는 멋진 Animation 효과들을 구현할 수 있다. framer-motion 라이브러리는 아래 명령어를 입력해서 설치할 수 있다.npm install framer-motionframer-moti.. 2025. 1. 1. 이전 1 다음
