Gooey Effect (메타볼 효과)

유기적인 블롭이 윤곽을 끊임없이 바꿉니다.

[적용할 곳]에 블롭 모프(Blob Morph) 반복 애니메이션을 넣어 줘. 모핑 블롭(morphing blob), 애니메이티드 블롭(animated blob)이라고도 불러.
유기적인 블롭이 천천히 돌면서 윤곽을 계속 바꾸게 해 줘. 모서리 없이 매끄럽고 부드럽게.
모양이 튀지 않게 이음매 없이 반복하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 멈춰 있게 해 줘.

한 단어가 같은 자리에서 흐려지며 다음 단어로 녹아들듯 바뀝니다.

[적용할 곳]에 모핑 텍스트(Morphing Text) 효과를 넣어 줘. 텍스트 모프(text morph)라고도 불러.
한 단어가 같은 자리에서 흐려지며 끈적하고 부드럽게 섞여 다음 단어로 녹아들고, 다음 전환 전에 잠깐 멈춰 있게 해 줘.
단어가 끊김 없이 순환되게 하고, 스크린 리더는 단어를 일반 텍스트로 읽게 하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 순환을 멈춰 줘.

햄버거 메뉴 같은 아이콘이 막대의 회전과 이동으로 다른 아이콘(X)으로 바뀝니다.

[적용할 곳]에 아이콘 모프(Icon Morph)를 넣어 줘. 햄버거 투 엑스(hamburger to X), 메뉴 아이콘 모프(menu icon morph)라고도 불러.
누를 때마다 위아래 막대가 먼저 가운데로 모인 다음 회전해 X가 되고 가운데 막대는 사라지며, 다시 누르면 반대로 돌아가게 해 줘. 빠르고 경쾌하게.
접근성 레이블과 펼침 상태가 함께 바뀌는 진짜 토글 버튼으로 만들고, 주변이 밀리지 않게 아이콘 크기는 고정해 줘.

대시 오프셋을 애니메이션해 SVG 선이 경로를 따라 그려지는 것처럼 보여 줍니다.

[적용할 곳]에 라인 드로잉(Line Drawing) 애니메이션을 넣어 줘. 패스 드로잉(path drawing), 셀프 드로잉 SVG(self-drawing SVG)라고도 불러.
각 선이 경로를 따라 처음부터 끝까지 부드럽게 저절로 그려지는 것처럼 보이고, 체크 표시 같은 두 번째 선은 첫 번째 선 바로 뒤에 이어지게 해 줘.
반복하지 말고 화면에 들어올 때 한 번만 재생하고, 사용자가 모션 줄이기(prefers-reduced-motion)를 켜 두었으면 다 그려진 선을 보여 줘.

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

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