[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(4)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git 저는 framer motion으로 스크롤애니메이션 구현할때마다,특정 임계값에 스크롤이 걸치면 무한으로 애니메이션이 트리거되는 현상이 일어나더라고요... 저번 잡생각 프로젝트때도 이것때문에 진짜 고생고생해서 현상이 거의 안보이게 완화시키는 것 까지는 성공했지만,100%해결하지는 못했었습니다. 다른분들은 어떻게 이 점을 해결하셨는지 궁금하네요! 저는 이번 학습에서 들어올 때 기준과, 나갈 때 기준을 다르게 두는 완충(버퍼) 작용을 해주는 훅을 사용해서 해결했습니다!!바로 비교될 수 있도록 3-1, 3-2로 기존 코드와 함께 영상으로 글 마지막에 정리해두었습니다~!! Week 1 ..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 10. 15.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(3)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git Week 1 — Step 3 (Variants / Stagger / AnimatePresence)개념 핵심Variants(상태에 이름 붙이기): 숫자/스타일을 직접 쓰는 대신 hidden / show / exit 같은 의미 있는 상태 이름으로 정의해서 가독성/재사용성/오케스트레이션을 높인다.Stagger(간격 재생): 부모 variants.show.transition에 staggerChildren, delayChildren을 넣으면 부모가 자식들의 시작 타이밍을 지휘한다.AnimatePresence + exit(퇴장): 조건부 렌더에서 사라질 때 바로 unmount하지 않고 e..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 10. 15.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(2)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git📌PreviewwhileHover={{ y: -6, scale: 1.02, boxShadow: "0 18px 40px rgba(0,0,0,0.18)", }}whileTap={{ scale: 0.98, y: -2 }}transition={{ type: "spring", stiffness: 320, damping: 26 }}→ 이런 간단한 프로퍼티만으로 호버시 떠오르는 효과, 눌리는 효과를 구현할 수 있다는게 정말 편리합니다! Week 1 — Step 2: 인터랙션 (whileHover / whileTap)목표: “사용자 입력에 반응하는” 마이크로 인터랙션을 정확히 쓰는 법. 개..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(1)

실습 예제를 따라하면서 직접 값을 하나하나 변경해봤더니, 벌써 이해가 쏙쏙 되는 기분입니당다들 따라서 같이 공부해봐요..ㅎㅂㅎ! 📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git Week 1 — Step 1: motion 기본기 (initial / animate / transition)1) 개념 딱 3개만motion.*: 어떤 태그든 motion.div, motion.button처럼 감싸면 “움직일 수 있는 컴포넌트”가 됨.initial / animate: 시작 상태 → 도착 상태를 선언. style이 아니라 애니메이션 상태를 적는다고 생각하기.transition: “어떤 느낌”으로 이동할지.type: "spring": 탄성(..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-0

다양한 인터랙티브 요소로 역동적인 웹 화면 구현을 자유자재로 하고싶습니다! 이에 앞서, 우선 Framer Motion을 잘 다뤄보자는 목표를 세워봤습니다. 사실 라이브러리는 어떻게 공부해야하는지 막연하길래아래 계획을 토대로 차근차근 주차별 진도 나가보겠습니다ㅎㅎ 실습을 따라하기 귀찮으신 분들을 위해 제 git레포지토리도 공유해드립니다.포크해서 사용하세요~!블로그 업데이트 된 곳까지는 늘 레포지토리도 동일하게 업데이트 할 예정입니다. GitHub - yeom-kenco/framer-motion-study-kit: ✍🏻framer-motion을 스스로 학습하며 공유하기 위해 올려둔 실습✍🏻framer-motion을 스스로 학습하며 공유하기 위해 올려둔 실습 파일들입니다. 계속해서 업로드 될 예정입니다...

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 9. 19.
• textsms