set에 대해서

동일한 질문에 대한 답변이 있기 때문에 링크로 답변을 대체합니다. https://www.inflearn.com/community/questions/1380490/gsap-set-%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90%EC%84%9C-%EC%B2%98%EC%9D%8C-%EB%B0%B0%EC%9A%B0%EB%8A%94%EA%B0%80%EC%9A%94 감사합니다 :)

gsap.set 은 어디에서 처음 배우는가요?

안녕하세요 kkamidog 님 😀 제가 저 영상을 촬영할 당시 오프라인 강의도 병행하고 있어서 설명을 한걸로 인식하고 수업을 진행한 것 같네요 🥹 열심히 수강 중이신데 혼란드려 죄송합니다. set 은 어려운 내용은 아니기 때문에 텍스트로 간단하게 설명드리겠습니다. gsap.set 은 from 과 to 처럼 트윈의 종류중 하나입니다. 다만, 애니메이션을 가지지 않는 특징을 가지고 있으며, 타임라인 안에 엮어서 같이 사용할 수 있습니다. (쉽게 이해하시기로는 애니메이션이 없는 css를 직접 적용해 버린다고 생각하시면 됩니다) 수강 하시는 도중 그래도 set 의 이해가 어려우시다면 다시 질문 남겨주세요 감사합니다 :)

set에 대해서 궁금증.

안녕하세요 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 은 애니메이션을 가지지 않는다! 를 기억해주세요 😃

타이포 폰트 소수점 사용 관련 질문

안녕하세요 김광기님 😀 비슷한 질문에 대한 답변을 드린적이 있어 질의응답 링크를 첨부드립니다. 확인해보시고, 추가 궁금한 내용이 있다면 다시 댓글을 남겨주세요 https://www.inflearn.com/community/questions/1094315/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EB%AC%B8%EC%9D%98%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 감사합니다 :)

gsap으로 흐르는 배너도 제작이 가능할까요?

안녕하세요 squirrel PARK 님 😀 제가 한달동안 답변을 안한 질문이 있따구요!!!!!!??????? 이건 못본게 분명해요..... 죄송해요 ㅠㅠ,, 원래는 못해도 일주일 안으로 답변을 드리는데... 해당 ui는 GSAP의 코드도 중요하지만 사실 저런 애니메이션은 HTML과 CSS가 8할 입니다. 다 설명드리기 어려워 코드를 작성하여 링크로 드릴테니 확인해보세용~~ (너무 답변이 늦어서.. 죄송한 마음에) https://stackblitz.com/edit/vitejs-vite-c2vptu?file=main.js 핵심은 오른쪽 상자 안의 자식들의 박스 시작 위치 입니다. *반응형은 적용이 되지 않은 상태 입니다. 해당 코드를 참고하여 반응형으로 제작해보세요 ^.^ (사진)  감사합니다 :)