GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.

안녕하세요 보르코님 😀 DOM 객체에 속성은 GSAP이 관리하는 대상이 아닌 Javascript 자체의 처리 결과이기 때문에직접 가져올 경우 이벤트를 사용해 업데이트를 해줘야 합니다.DOM 객체를 GSAP으로 반응성을 직접 제어하고자 한다면 gsap.to(elem,{ x:()=>{ // 콜백 사용 } }) 속성에 콜백 함수를 연결하여 사용하는 방법이 있습니다.콜백 방식을 사용하면 gsap이 업데이트 될 때마다 값을 새롭게 계산하기 때문에 보다 편하게 애니메이션 제어가 가능합니다. Q. 스크롤을 중간으로 내렸을 때처럼 애니메이션이 중간정도 진행됬을 때와 같은 경우를 처리하는 방법이 따로 있는지도 궁금합니다.이 부분에 대해선 제가 제대로 이해하지 못해 답변을 드리기 어렵습니다 ㅠ^ㅠ 감사합니다 :)

스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!

안녕하세요 rinrinhye님 😀 모바일은 환경이 다양해서 정확한 답변을 드리긴 어려울 것 같습니다. 공식 문서에서 안내하는 내용은 활성화 / 비활성화를 제공하거나 플러그인을 사용해 delta 값을 다르게 내보내는 형태로 사용이 가능하다고 제시하고 있습니다. mobile scroll disabled https://github.com/idiotWu/smooth-scrollbar/issues/159smooth-scroll mobile issue :https://github.com/idiotWu/smooth-scrollbar/issues?q=%08mobile감사합니다 :)

선생님 알려주신 내용을 기반삼아 구현하고 싶은 UI가 있습니다.

안녕하세요 eljsh95님 😀 공전 애니메이션에 대한 질문이 많아 텍스트로 설명드리기 한계가 있어영상으로 제작하여 답변을 드려봅니다. 섹션5. GSAP utils method 부분에 삼각함수 파트를 레코딩으로 남겨놨으니 참고하여 실무에 반영해보시면 좋을 것 같습니다. 감사합니다 :)

업데이트 버전 토큰 스튜디오 import 시 ..and 2 more

안녕하세요 오재용님 😀 보통은 and 2 more 부분을 클릭하면 하단에 더 길게 나오게 됩니다. 혹시 클릭을 해도 나오지 않을까요?

OneScroll Layout 질문 드립니다!

안녕하세요 김세진님 😀 비슷한 질문에 대한 답변이 있어 링크를 공유드립니다.첫 번째 질문https://www.inflearn.com/community/questions/1376447/onescroll-layout-1-%EA%B0%95%EC%9D%98%EC%A4%91-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4연결된 두 번째 질문https://www.inflearn.com/community/questions/1376900/onescroll-layout-1-%EA%B4%80%EB%A0%A8-%EC%9E%AC%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 해당 코드도 학습 자료 안에 첨부해놨으니 다시 확인해보시면 좋을 것 같습니다. 감사합니다 :)

autoAlpha : 0 사용 시 css로 visibility hidden 꼭 줘야하는지 궁금해요

안녕하세요 rinrinhye 님 😀 우리가 개발하는 환경은 네트워크 상태가 좋아 FOUC를 체감할 순 없습니다.다만, 인터넷이 느린 환경에서 보면, 깜빡거리는 문제가 자주 발생하므로 사용자의 ux가 많이 떨어지게 됩니다. 직접 확인해보고 싶으시다면, 개발자 도구를 여시고 network 패널에서 속도를 조절 후 새로고침을 해보시면 보다 자세히 확인할 수 있습니다. (답답함 주의) (사진) 일반 사용자는 인식하지 못하지만, 접근성을 위해 다른 환경의 사용자도 배려해 웹사이트를 만들어가는 연습이 필요합니다. 감사합니다 :)

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 감사합니다 :)