N

Inflearn brand logo image

인프런 커뮤니티 질문&답변

모카님의 프로필 이미지
모카

작성한 질문수

웹 애니메이션을 위한 GSAP 가이드 Part.02

motionpath 플러그인에서 align의 자세한 역할 궁금합니다

해결된 질문

작성

·

37

1

안녕하세요 강의 잘 듣고 있습니다!

 

공식 문서 보면서 복습하는 중인데

공식문서 예제에는

 

  motionPath:{
    path: "#path",
    align: "#path",
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  }

 

처럼 path와 align이 같은 요소로 지정되어 있습니다.

그래서 codepen을 이용해서 강의 내용처럼

align에 움직이는 요소를 지정해봤는데

경로에서 붕 떠서 이동합니다.

 

마찬가지로 강의 샘플 코드도

align에 경로를 넣어서 한번 테스트 해봤는데

이번에는 호랑이가 너무 붕 떠서 이동합니다.

 

강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데

이건 svg 코드 구성에 따라서 다른건가요???

 

공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데

추상적인 설명인 것 같아서 잘 이해가 안됩니다..!

 

align에 대해 제가 정확히 이해하고 있는게 맞는지,

그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다

 

HTML/CSSjavascript인터랙티브-웹gsap

답변 2

0

범쌤님의 프로필 이미지
범쌤
지식공유자

안녕하세요 모카님 😀

 

움직이는 요소(target)의 좌표계를 어떤 기준(align)에 맞출지 지정하는게 align의 정확한 의미라 보시면 될 것 같습니다.

 

gsap.to("#ball", {
  duration: 3,
  motionPath: {
    path: "#myPath",       // 움직일 경로
    align: "#myPath",      // 그 경로를 따라 좌표계 정렬
    autoRotate: true,
    alignOrigin: [0.5, 0.5]  // 중심을 어떻게 정렬할지 (기본은 가운데)
  }
});

 

다시 말해 aligh:#path 라고 하면, 움직이는 요소의 기준점이 #path의 좌표계와 맞춰지는걸 의미하고

align:#moveElement를 하면 target을 다시 target에게 align하는 것이므로 붕뜨거나 깨지는 현상이 발생합니다.

결론 : align에서 잡은 element는 본인의 위치에서 path로 잡은 element의 경로대로 움직인다.

ex) align에 마운틴이나 다른 요소들을 넣어보세요

 

밑에는 공식문서 내용을 번역해놓은 내용이니 한번 참고해서 봐주시면 좋을 것 같습니다 :)

path

String | Element | Array [필수]
타겟(들)을 애니메이션할 모션 경로입니다. 다음 중 하나일 수 있습니다:

  • SVG 요소 (셀렉터 문자열 또는 직접 참조) 예:

  • SVG 경로 데이터 문자열 예:

  • x, y 좌표를 가진 객체들의 배열. 이 좌표들을 통과하는 곡선 경로가 생성됩니다.
    또는 type: "cubic"을 설정하면 이 좌표들이 순차적인 큐빅 베지어 좌표로 해석됩니다
    (순서는: 기준점(anchor), 두 개의 제어점(control point), 기준점, 두 개의 제어점 등).

  • 다른 속성들을 정의하는 객체들의 배열 ("x"와 "y"일 필요는 없음).
    이 경우 각 값을 통과할 때 속도 변화가 부드럽게 조절됩니다.

 

align

String | Element
기본적으로, 경로 데이터의 원시 좌표 값들은 타겟의 x/y 변형(transform)에 직접 삽입되지만,
align 속성은 좌표 공간을 구부려서, 타겟을 경로 바로 위에 정확히 위치시키거나 (또는 경로를 타겟으로 이동시켜서),
서로 다른 변형된 컨테이너 안에 얼마나 깊게 중첩되어 있든 상관없이 위치를 맞춰줍니다!
경로 자체에 정렬하는 것도 가능합니다.
즉, path와 align이 동일한 요소를 가리킬 수도 있습니다.

align에는 다음 중 하나가 될 수 있습니다:

  • 셀렉터 문자열 — 예: "#path"는 ID가 "path"인 요소를 선택하며,
    트윈(tween)의 타겟을 해당 "#path" 요소의 왼쪽 상단 모서리에 정확히 정렬되도록 이동시킵니다.
    만약 타겟을 해당 위치의 중심에 정렬하고 싶다면 alignOrigin: [0.5, 0.5]를 사용하세요.

  • 요소 — DOM 요소에 대한 참조(reference)처럼 직접 지정할 수도 있습니다.

  • "self" — 경로를 트윈 타겟의 위치로 이동시켜서, 초기 이동 시 튀지 않도록 만듭니다.
    다시 말해, 마치 경로가 현재 타겟의 위치에서부터 그려진 것처럼 동작합니다.

  • 또한 offsetX와 offsetY를 사용하여 정렬을 미세 조정할 수도 있습니다.

 

 

 

 

 

0

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 모카님, 질문해주신 내용은 GSAP의 motionPath 플러그인에서 흔히 접하게 되는 문제입니다. align 속성은 경로를 따라 이동하는 요소가 경로에 맞춰 얼마나 잘 정렬될지를 정의합니다.

MotionPath의 align 속성

  • align은 일반적으로 경로(#path)와 동일한 요소를 사용합니다. 이는 움직이는 객체의 이동 경로와 객체의 계산된 중심이 일치하도록 돕습니다.

  • 예를 들어, align: "#path"로 설정하면, GSAP는 경로의 중심에 맞춰 움직이는 객체를 정렬하려 합니다. 요소의 실제 시각적 중심과 GSAP가 계산한 중심이 불일치하면 예상치 못한 위치(예: 경로에서 ‘붕 뜬’)로 나타나게 됩니다.

이해를 돕기 위한 해결방법

  1. SVG 구조 확인: SVG 내부에서 경로와 이동 객체의 기준점을 확인하세요. 이런 기준점이 일치하지 않으면 경로에 맞춰 중심이 잘못될 수 있습니다.

  2. alignOrigin 활용: alignOrigin 속성으로 중심을 조정할 수 있습니다. [0.5, 0.5] 설정은 각 객체의 중심을 기준으로 조정하는 가장 일반적인 설정입니다.

  3. 실험과 조정: 실질적으로 경로에서 잘 보이도록 하려면 align과 alignOrigin을 조정하며 테스트해보는 것이 필요합니다.

예시 질문을 참조하여 더 깊게 알아보시기 바랍니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

모카님의 프로필 이미지
모카

작성한 질문수

전체 Q&A
질문하기