ANIMATION (3) 썸네일형 리스트형 프레이머 모션[framer motion] 기초 2부 : 레이아웃 애니메이션 이번에 배울 것 여러 컴포넌트에 애니메이션 전파하기 복잡한 레이아웃 에니메이션 오케스트레이션(조정 및 통합) Propagation (애니메이션 전파) 부모 컴포넌트의 variant 변경을 자식 컴포넌트에 알림 카드와 레이블을 덮고 있는 "보이지 않는" 모션 레이어가 있습니다. 이 레이어는 "hover" variant를 설정하는 whileHover 소품을 보유합니다. "글로우" 자체도 컴포넌트이지만 정의하는 유일한 것은 호버 키가 있는 자체 variant 객체입니다. 보이지 않는 레이어가 "hover"되면 hover variant를 토글하고 hover variant가 prop에 정의되어 있는 모든 하위 모션 컴포넌트는 이 변경 사항을 감지하고 해당 동작을 토글합니다. const CardWithGlow = .. 프레이머 모션[Framer Motion] 기초 1편 : 생기초 알아보기 원문 보기 https://blog.maximeheckel.com/posts/guide-animations-spark-joy-framer-motion/ Guide to creating animations that spark joy with Framer Motion - Maxime Heckel's Blog An interactive guide introducing everything I've learned about Framer Motion through fun examples and little case studies of animations I built. blog.maximeheckel.com 아래에서 다루는 예제들 원문은 영어로 읽는데 20분 정도 걸리는 상당한 분량입니다. 내용을 거의 3분 분량.. CSS 애니메이션 : 성능 느린 애니메이션은 사용자 경험을 망칩니다. 우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다. 이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다. 안그러면 사용자는 버벅거림을 느끼게 됩니다. 애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다. 픽셀 파이프라인 화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다. 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다. 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다. 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다. 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채.. 이전 1 다음
