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

안녕하세요 kkamidog 님 😀

gsap.set은 from과 to 처럼 트윈의 종류 중 하나입니다.

하지만 애니메이션을 적용시키는게 아닌, 해당 프로퍼티 값을 세팅만 하고 끝나는 메서드이죠,

트윈이기 때문에 타임라인에 엮어서 사용이 가능합니다.

tl.set('#emart .pick', { opacity: 0 })
    .to(map, { scale: 1, x: 0, y: 0 })
    .set('#emart .pick', { opacity: 1 }) // 3번 라인 
    .fromTo('#emart .path', { strokeDashoffset: 496 }, { strokeDashoffset: 0 })
    .to(
      '#emart .pick',
      {
        motionPath: {
          path: '#emart .path',
          align: '#emart .path',
          alignOrigin: [0.5, 0.5],
        },
      },
      '<'
    );

해당 코드에서 3번 라인에서 .pick이 밝아진 이후 (마트위치) 애니메이션이 이후 타임라인에 따라 시작되는 흐름처럼 보이지만, set은 위에서 설명드렸듯이 애니메이션의 시간이 존재하지 않습니다.

고로 투명도 값이 1로 설정되는과 동시에 아래의 애니메이션이 동시에 진행되기 때문에 선이 그려지면서 강남역부터 .pick이 등장하는 것처럼 보이는 겁니다.

질문자님 처럼

tl.set('#emart .pick', { opacity: 0 })
    .set('#emart .pick', { opacity: 1 })
    .to(map, { scale: 1, x: 0, y: 0 })

이렇게 작성 할 경우 set은 위에서 다 끝나버리고 map의 to 애니메이션이 적용된 후 아래의 애니메이션줄이 실행되기 때문에 .pick의 위치가 마트에서 보이고 시작하는 애니메이션이 됩니다.

가장 중요한건 set은 애니메이션을 가지지 않는다! 를 기억해주세요 😃

안녕하세요, 인프런 AI 인턴입니다.

kkamidog님, 질문 주신 내용과 유사한 주제에 대해 이미 해결된 기존 답변이 있습니다. 이와 관련된 GSAP의 set 메서드와 애니메이션 순서 제어에 대한 설명을 참고하시면 도움이 될 것 같습니다.

강의에서 언급된 set 메서드는 애니메이션 시작 전에 요소의 초기 상태를 설정하는 역할을 합니다. 애니메이션이 시간 순서에 따라 진행되기 때문에 각 애니메이션 단계가 실행되기 전에 설정된 상태가 반영됩니다. 이는 애니메이션 중간에 상태가 변경될 수 있다는 것을 의미합니다.

다음과 같은 질문이 도움될 것입니다:

강사님 다중요소제어 stagger 질문있습니다

해당 질문에서는 첫 번째 요소가 예상치 못하게 움직이는 문제를 해결하기 위해 window load 함수와 함께 set 메서드 및 다른 애니메이션 속성을 사용하여 문제를 해결한 방법이 설명되어 있습니다.

window.addEventListener('load', function() {
  gsap.set('#emart .pick', { opacity: 0 });
  gsap.set('#emart .pick', { opacity: 1 });
  gsap.timeline().to(map, { scale: 1, x: 0, y: 0 });
});

이 방법을 통해 애니메이션을 페이지 로드 후 실행되도록 설정하여 문제를 해결할 수 있습니다.

이처럼 각 애니메이션 단계는 순서대로 실행되기 때문에 특정 요소의 상태 변경이 예상하지 못한 시점에 일어나는 것을 방지하기 위해 애니메이션 순서를 잘 조정하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.