Web Animation

SVG

SVG 기초

1. SVG란?
2. SVG viewport와 좌표계, viewbox
   1. viewport와 좌표계
   2. viewBox
3. preserveAspectRatio
4. SVG 컨테이너 요소
   1. <g>
   2. <use>
   3. <defs>
   4. <symbol>
   5. <svg>
5. SVG 도형, paths 요소로 그림 그리기
   1. <rect>
   2. <circle>
   3. <ellipse>
   4. <line>
   5. <polyline>
   6. <polygon>
   7. <path>와 d attributes
6. SVG text 요소
   1. <text>
7. SVG mask와 clip-path
   1. <mask>
   2. <clipPath>
8. svgOrigin

SVG 애니매이션

1. SVG 애니매이션의 다양한 방법

   1. SMIL

      1. <animate>
      2. <animateMotion>
      3. <animateTransform>
      4. <set>

   2. CSS

      1. CSS로 SVG 애니매이션 다루기

   3. Javascript

      2. JS로 SVG 애니매이션 다루기
2. 대표적인 SVG Animation
   1. Path Animation
   2. Text Animation
   3. SVG Illustration
3. SVG 애니매이션을 도와주는 도구

   1. Chrome Animation Tool

   2. Figma로 SVG 다루기

      3. SVG 생성 및 SVG Element 비교
      4. 간단한 SVG 애니매이션 생성
4. Animation을 다루는 라이브러리
   1. p5.js의 간단한 소개 및 예시 그리고 장단점
   2. anime.js의 간단한 소개 및 예시 그리고 장단점
   3. velocity.js 간단한 소개 및 예시 그리고 장단점
   4. gsap의 간단한 소개 및 예시 그리고 장단점
5. GSAP SVG Animation

Framer Motion

1. Framer Motion 소개 및 GSAP과의 차이
2. framer-motion 기초
   1. <motion/>
   2. animate Attribute
   3. inital Attribute
   4. transition Attribute
   5. variants Attribute
      1. Propagation
      2. Orchestration
      3. Keyframes
3. Animate Presence
   1. <AnimatePresence/>
4. Animating Routes
   1. React Router와 함께 활용하는 Framer Motion
      • 참고, React Transition Group with React Router
5. SVG와 Framer Motion
6. useCycle Hook