Line Drawing (라인 드로잉)

글자 윤곽이 선으로 먼저 그려진 뒤 채우기가 나타납니다.

[적용할 곳]에 스트로크 텍스트 드로우(Stroke Text Draw) 효과를 넣어 줘. 드로우 인 텍스트(draw in text), 애니메이티드 스트로크 텍스트(animated stroke text)라고도 불러.
글자 윤곽이 부드럽게 저절로 그려지고, 윤곽이 다 그려지면 채우기가 서서히 나타나게 해 줘.
로드될 때 한 번만 재생하고, 단어는 실제 텍스트로 접근할 수 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 채워진 텍스트를 바로 보여 줘.

체크하면 상자 안에 체크 표시가 한 획씩 그려집니다.

[적용할 곳]에 체크박스 체크 드로우(Checkbox Check Draw) 애니메이션을 넣어 줘. 애니메이티드 체크박스(animated checkbox), 체크마크 드로우(checkmark draw)라고도 불러.
체크하면 상자가 색으로 채워지고 체크 표시가 빠르고 부드러운 한 획으로 그려지게 해 줘. 체크를 풀면 같은 방식으로 지워지게.
체크 상태를 가진 진짜 체크박스로 유지하고, 키보드로도 동작하며 포커스 링이 보이게 해 줘.

원과 체크 표시가 스스로 그려지며 작업이 성공했음을 알립니다.

[적용할 곳]에 석세스 체크마크(Success Checkmark) 애니메이션을 넣어 줘. 애니메이션 성공 체크(animated success tick)라고도 불러.
원이 부드러운 한 획으로 그려진 다음 그 안에 체크 표시가 그려지고, 표시 전체가 작고 부드럽게 톡 튀게 해 줘. 차분하고 확신 있게.
작업이 성공했을 때 한 번만 재생하고, 스크린 리더가 읽어 줄 수 있는 텍스트 메시지를 함께 두고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 완성된 표시를 바로 보여 줘.

호버하면 링크 아래에 한쪽 끝이나 가운데에서 밑줄이 자라납니다.

[적용할 곳]에 언더라인 드로우(Underline Draw) 호버 효과를 넣어 줘. 애니메이션 밑줄(animated underline), 호버 밑줄 애니메이션(hover underline animation)이라고도 불러.
포인터가 링크 위에 있으면 텍스트 아래 밑줄이 왼쪽에서 오른쪽으로 부드럽게 늘어나고, 포인터가 떠나면 다시 줄어들게 해 줘. 빠르고 은은하게.
밑줄 때문에 주변 레이아웃이 밀리지 않게 하고, 키보드 포커스에서도 같은 효과를 보여 줘.

요소가 직접 정한 곡선 경로를 따라 이동하며, 경로에 맞춰 방향을 돌릴 수도 있습니다.

[적용할 곳]에 모션 패스(Motion Path) 애니메이션을 넣어 줘. 애니메이트 얼롱 패스(animate along path)라고도 불러.
작은 요소가 직접 정한 곡선 경로를 따라 느리고 일정한 속도로 이동하면서, 나아가는 방향을 바라보도록 돌게 해 줘.
반복이 튀지 않게 닫힌 경로를 쓰고, 경로는 고정 크기가 아니라 컨테이너 크기에 맞춰 늘고 줄게 해 줘.

작은 원이나 아이콘이 원형 궤도를 따라 중심 주위를 돕니다.

[적용할 곳]에 오비팅 서클(Orbiting Circles)을 넣어 줘. 오빗 애니메이션(orbit animation), 오비팅 아이콘(orbiting icons)이라고도 불러.
작은 원들이 가운데 요소 주위를 원형 고리를 따라 느리고 일정하게 돌고, 바깥 고리는 반대 방향으로 더 느리게 돌게 해 줘.
반복은 끊김 없이, 도는 항목은 항상 똑바로 서 있게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 회전을 멈춰 줘.

한 벡터 도형이 다른 도형으로 부드럽게 바뀝니다.

[적용할 곳]에 셰이프 모프(Shape Morph)를 넣어 줘. 패스 모핑(path morphing), SVG 모프(SVG morph)라고도 불러.
오각형이 오므라들며 별이 되는 것처럼 한 도형이 다른 도형으로 부드럽게 바뀌고, 각 점이 고르고 여유 있는 속도로 제자리로 미끄러지게 해 줘.
깜빡임 없이 깔끔하게 바뀌도록 두 도형의 점 개수와 대응을 맞추고, 반복하지 말고 상태가 바뀔 때마다 한 번씩 재생해 줘.