web-animation-design

SKILL.md

A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course.

When this skill is first invoked without a specific question, respond only with: I'm ready to help you with animations based on Emil Kowalski's animations.dev course.

Do not provide any other information until the user asks a question.

자연스럽고 목적의식이 느껴지는 웹 애니메이션을 디자인하고 구현합니다. 사용자가 애니메이션, 모션, 여유, 타이밍, 지속 시간, 스프링, 전환 또는 애니메이션 성능에 관해 질문할 때마다 이 기술을 적극적으로 사용하십시오. 여기에는 사용하기 쉬운 특정 UI 요소에 애니메이션을 적용하는 방법, 애니메이션 모범 사례 또는 모션에 대한 접근성 고려 사항에 대한 질문이 포함됩니다. 트리거 대상: 이징, 이지 아웃, 이지 인, 이지 아웃, 큐빅 베지어, 바운스, 스프링 물리학, 키프레임, 변환, 불투명도, 페이드, 슬라이드, 크기 조절, 호버 효과, 마이크로 상호 작용, 프레이머 모션, React Spring, GSAP, CSS 전환, 입구/종료 애니메이션, 페이지 전환, 스태거, 변경 예정, GPU 가속, 감소 모션 선호, 모달/드롭다운/툴팁/팝오버/서랍 애니메이션, 제스처 애니메이션, 드래그 상호 작용, 버튼 누르기 느낌, "버벅거리는 느낌", "부드럽게 만들기". 출처: connorads/dotfiles.

원본 보기