노션 노트를 기반으로 자동 발굴한 블로그 포스트 주제입니다.
무엇을 다루는 포스트인가
라이브러리 없이 애니메이션을 굴리는 핵심 메커니즘을 다룬다. requestAnimationFrame 루프 구성, '경과 시간/duration'으로 진행률을 계산하는 방식, 이징 함수 적용, opacity로 요소를 자연스럽게 등장시키는 transition 일반화까지 직접 만들어 본다.
독자가 얻는 것
타이머가 아니라 프레임 루프로 부드러운 애니메이션을 만드는 원리(진행률·델타타임·이징)를 이해하고, 재사용 가능한 transition 유틸을 스스로 구현할 수 있다.
참고 노션 페이지
- (직접 연결된 노트는 못 찾음 — 아이디어 기반. 근거 메모: 시리즈 애니메이션 / 피쳐 생성 애니메이션)
작성 메모
- 예상 시리즈:
frontend
- 작성 시
/blog-from-notion 원칙 준수: 실제로 돌아가는 예제 + 스크린샷/이미지, 본인 문체 유지, 빌드/실행 검증.
🤖 Generated with Claude Code
무엇을 다루는 포스트인가
라이브러리 없이 애니메이션을 굴리는 핵심 메커니즘을 다룬다. requestAnimationFrame 루프 구성, '경과 시간/duration'으로 진행률을 계산하는 방식, 이징 함수 적용, opacity로 요소를 자연스럽게 등장시키는 transition 일반화까지 직접 만들어 본다.
독자가 얻는 것
타이머가 아니라 프레임 루프로 부드러운 애니메이션을 만드는 원리(진행률·델타타임·이징)를 이해하고, 재사용 가능한 transition 유틸을 스스로 구현할 수 있다.
참고 노션 페이지
작성 메모
frontend/blog-from-notion원칙 준수: 실제로 돌아가는 예제 + 스크린샷/이미지, 본인 문체 유지, 빌드/실행 검증.🤖 Generated with Claude Code