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

안녕하세요 모카님 😀 움직이는 요소(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에 마운틴이나 다른 요소들을 넣어보세요 밑에는 공식문서 내용을 번역해놓은 내용이니 한번 참고해서 봐주시면 좋을 것 같습니다 :)pathString | Element | Array [필수]타겟(들)을 애니메이션할 모션 경로입니다. 다음 중 하나일 수 있습니다:SVG 요소 (셀렉터 문자열 또는 직접 참조) 예:SVG 경로 데이터 문자열 예:x, y 좌표를 가진 객체들의 배열. 이 좌표들을 통과하는 곡선 경로가 생성됩니다.또는 type: "cubic"을 설정하면 이 좌표들이 순차적인 큐빅 베지어 좌표로 해석됩니다(순서는: 기준점(anchor), 두 개의 제어점(control point), 기준점, 두 개의 제어점 등).다른 속성들을 정의하는 객체들의 배열 ("x"와 "y"일 필요는 없음).이 경우 각 값을 통과할 때 속도 변화가 부드럽게 조절됩니다. alignString | Element기본적으로, 경로 데이터의 원시 좌표 값들은 타겟의 x/y 변형(transform)에 직접 삽입되지만,align 속성은 좌표 공간을 구부려서, 타겟을 경로 바로 위에 정확히 위치시키거나 (또는 경로를 타겟으로 이동시켜서),서로 다른 변형된 컨테이너 안에 얼마나 깊게 중첩되어 있든 상관없이 위치를 맞춰줍니다!경로 자체에 정렬하는 것도 가능합니다.즉, path와 align이 동일한 요소를 가리킬 수도 있습니다.align에는 다음 중 하나가 될 수 있습니다:셀렉터 문자열 — 예: "#path"는 ID가 "path"인 요소를 선택하며,트윈(tween)의 타겟을 해당 "#path" 요소의 왼쪽 상단 모서리에 정확히 정렬되도록 이동시킵니다.만약 타겟을 해당 위치의 중심에 정렬하고 싶다면 alignOrigin: [0.5, 0.5]를 사용하세요.요소 — DOM 요소에 대한 참조(reference)처럼 직접 지정할 수도 있습니다."self" — 경로를 트윈 타겟의 위치로 이동시켜서, 초기 이동 시 튀지 않도록 만듭니다.다시 말해, 마치 경로가 현재 타겟의 위치에서부터 그려진 것처럼 동작합니다.또한 offsetX와 offsetY를 사용하여 정렬을 미세 조정할 수도 있습니다.

안녕하세요 ScrollSmoother에 대해 질문드릴게요

안녕하세요 squirrel PARK님 😀 스크롤을 부드럽게 하는 플러그인의 도움을 받을때는 background-attachment:fixed와 같은 브라우저가 제공해주는 기능을 가지고는 효과를 구현할 수 없습니다 scrollSmoother에서 parallax효과를 주고 싶다면, effetcs 모드를 true로 설정 후 애니메이션을 주고싶은 대상 엘리먼트의 속성으로 data-speed값을 적용시켜주시면 쉽게 애니메이션을 구현할 수 있습니다 😀 import { gsap } from 'gsap'; import { ScrollSmoother } from 'gsap/ScrollSmoother'; gsap.registerPlugin(ScrollSmoother); ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1.5, // 부드러운 정도 effects: true // data-speed 지원 켜기 }); (사진) 우주여행 scrollSmoother가 무료로 제공된 만큼 최대한 빠르게 영상을 업데이트해 올려보도록 하겠습니다. 강의 열심히 수강해주셔서 감사합니다 :)

barba와 ScrollSmoother 사용했을 때 스크롤 업데이트

안녕하세요 wkdejtlr님 😀 barba의 transition안에 있는 콜백에 scrollSmoother의 refresh를 넣으시면 페이지에 들어올 때 마다 초기화를 하실 수 있습니다. barba.init({ transitions: [ { name: 'default-transition', async leave(data) { await gsap.to(data.current.container, { opacity: 0 }); }, async enter(data) { // 새 콘텐츠에 대한 ScrollSmoother 업데이트 scrollSmoother.scrollTo(0); // 원하는 위치로 스크롤 scrollSmoother.refresh(); // ⭐️ DOM 업데이트 인식 }, async after(data) { // 추가로 필요한 동작 } } ] });

GSAP 플러그인의 무료화 관련

안녕하세요 류지25님 😀 webflow가 gsap을 인수 후 모든 서비스를 무료로 제공하고 있습니다.이에 맞춰 저도 업데이트 내용을 준비중에 있습니다. 말씀주신 것 처럼 제한 없이 다양한 애니메이션을 보여줄 수 있을 것 같아 저도 기대가 됩니다 ~ ㅎㅎ다만, 제가 지금 현재 하고있는 강의 스케줄이 너무 많아 빠르게 반영되지는 않을 것 같습니다 🥹 꾸준히 gsap을 사랑해주셔서 감사합니다 ❤_❤

화면이 보이지가 않아요?

안녕하세요 jj4249 님 😀해당 문제는 인프런 자체의 문제로 보여집니다. 어느 파트 강의가 안보이는지 자세히 말씀해주시면 인프런쪽에 전달해 드리도록 하겠습니다.감사합니다 :)

이상한 부분이 있어서 문의드립니다.

안녕하세요 gangsugi님 😀 scroll-content는 우리가 직접 만들진 않았지만, smooth-scrollbar를 사용하면 내부적으로 DOM요소를 하나 생성해 부드러운 스크롤을 처리해줍니다.그 생성된 DOM요소가 scroll-content라는 클래스를 가지고 만들어집니다. 감사합니다 :)

smooth-scrollbar 관련 질문

안녕하세요 duddud님 😀좋은 질문 감사드립니다~ lenis와 smooth-scrollbar는 몇가지 차이점이 있습니다. lenis는 가상 스크롤(virtual scroll)을 사용하여 기본 스크롤 동작을 변경하는 방식이고,requestAnimationFrame을 사용해 스크롤 애니메이션을 처리합니다. smooth-scrollbar는 실제 DOM요소를 사용하여 스크롤바를 완전 새롭게 재구현하여 스크롤 애니메이션을 처리합니다. lenis는 단순히 부드러운 스크롤 효과를 적용해야 하는 경우에 적합한 도구이며 기능을 많이 포함하고 있지 않기 때문에 용량도 작다는 장점이 있습니다. smooth-scrollbar는 기본 브라우저 스크롤바를 완전히 다른 DOM요소로 대체하기 때문에 스크롤바의 색상, 너비, 모서리, 크기등 모든 부분을 css로 제어할 수 있으며, 원하는 스크롤 방향의 잠금 뿐만 아니라 스크롤의 lifeCycle과 다양한 플러그인들까지 지원하기 때문에 보다 복잡하고 섬세한 컨트롤이 가능합니다. 뭐가 더 좋다 나쁘다 할것 없이 도구는 상황에 맞게 사용하는게 제일 좋은 방향인 것 같습니다. 마치 React vs Vue vs Svelt 도구들을 골라 사용하는 것 처럼 말이죠, 강의 수강해주셔서 감사합니다 :)

imagesLoaded 에 관해 질문드려요

안녕하세요 gangsugi님 😀 정확한 확인을 위해 전체 코드를 깃헙에 올려주시거나 메일로 보내주시면 확인 후 답변 드리도록 하겠습니다!seonbeom2@gmail.com 감사합니다 :)

컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ

안녕하세요 이수연 님 해당 질문에 대한 업데이트 소식을 새 소식에 추가해놓은 적이 있습니다. 해당 내용을 확인하시고 마지막 영상을 먼저 시청하신 후 이후 수업을 진행해 주시면 더욱 좋을 거 같습니다. https://www.inflearn.com/course/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-with-%ED%94%BC%EA%B7%B8%EB%A7%88/news/1355091감사합니다 :)

FOUC 관련 질문입니다!

안녕하세요 yooniverse 님 😀 정확한 확인을 위해 깃헙 주소를 같이 남겨주실 수 있을까요~?