#animation

Frontend › CSS

끝에서 처음으로 자연스럽게 이어지는 캐러셀을 만드는 기법. 양끝에 복제 슬라이드를 붙이고 transitionend에서 전환 없이 제자리로 점프하는 버튼형 캐러셀, 애니메이션 중 연속 클릭 잠금, 페이지 단위 이동, 목록을 두 번 이어 붙여 translateX(-50%)로 흘리는 CSS 마키, @keyframes 퍼센트로 멈춤 구간을 만드는 자동 슬라이드, 가장자리 페이드와 움직임 줄이기까지.

• #css
• #ui
• #javascript
• #frontend

Frontend › CSS

상태 변화를 부드럽게 잇는 transition과, 여러 단계를 스스로 재생하는 @keyframes 애니메이션의 차이와 속성. 부드러운 애니메이션을 위한 transform·opacity 원칙, 움직임 줄이기 설정 존중, Animate.css·Hover.css·Animista 같은 CSS 애니메이션 라이브러리와 JS 라이브러리로 넘어갈 시점을 정리한다.

• #css
• #frontend
• #performance

Frontend › CSS

SPA에서 DOM을 바꾸는 코드를 document.startViewTransition()으로 감싸면 브라우저가 옛 화면을 스냅숏으로 찍고 새 화면과 교차 페이드한다. ::view-transition-old·new·group 가상 요소로 애니메이션을 바꾸고, view-transition-name으로 특정 요소를 이어 움직이고, 전환 유형으로 방향을 나누고, 움직임 줄이기 설정을 존중하는 법을 정리한다.

• #css
• #frontend
• #spa

Frontend

브라우저가 GPU로 그리는 원리(WebGL·WebGPU·셰이더), Three.js로 그리는 웹 3D, 영상을 투명 배경 애니메이션 아이콘으로 쓰는 방법을 다루는 노트 모음.

• #frontend
• #graphics
• #webgl

Frontend › Graphics

Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.

• #frontend
• #design
• #media
• #mobile

Frontend › JavaScript

CSS로 부족한 애니메이션을 JavaScript로 만드는 두 방법. requestAnimationFrame 위에 duration·timing·draw로 나눈 범용 animate 함수를 짜고, 타이밍 함수(power·back·bounce·elastic)와 easeOut·easeInOut 변환을 직접 만든다. 브라우저 엔진을 그대로 쓰는 element.animate()는 재생 제어, finished 프로미스, commitStyles, 스크롤 타임라인을 준다.

• #javascript
• #browser
• #performance
• #frontend

Frontend › UI Design

기다림을 줄일 수 없을 때 체감을 다루는 로딩 UI 네 가지를 정리했다. 짧고 부분적인 로딩은 스피너, 핵심 액션은 브랜드 로딩 애니메이션, 페이지 전체는 스켈레톤, 10초 넘는 작업과 단계형 흐름은 프로그레스 바를 쓴다. 1초 미만이면 아무것도 띄우지 않는다.

• #frontend
• #ux
• #ui
• #accessibility

Frontend › UI Design

UI 애니메이션을 자연스럽게 만드는 원리. 디즈니의 애니메이션 12원칙을 웹에 옮기는 법, 속도는 모션 커브의 기울기라는 이해와 cubic-bezier 읽기, 축마다 다른 타이밍으로 곡선 경로를 만드는 겹친 애니메이션과 offset-path, 여러 요소를 시차로 움직이는 안무, 60fps를 지키는 구현 규칙을 정리한다.

• #design
• #css
• #performance
• #frontend