hover pulse animation 관련해서 질문있습니다!

안녕하세요 방가워요님 😀 reverse를 사용하셔도 동일하게 부드러운 애니메이션을 만들 수 있습니다. 차이점은 애니메이션의 타임라인 부분에 일시정지해 있느냐(pause) 애니메이션의 타임라인이 처음의 위치로 돌아가느냐 (reverse)의 차이점이 있습니다. 직접 적용해보시면 자연스러운것과 부자연스러운 애니메이션들을 확인하실 수 있을거예요 감사합니다 :)

어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!

안녕하세요 pom0306님 😀부모사이즈를 기준으로 움직이고 싶다면, %를 사용하시면 보다 유연하게 애니메이션을 설정할 수 있습니다. 단 %를 쓸 경우 문자로 감싸주셔야 해요! gsap.to(target, {x: '80%'}) 열심히 시청해주셔서 감사합니다 :)

피그마 배리어블에 export시 값 저장 안됨

답변 완료.

Style - variable 문으ㅣ ㅜㅜ

안녕하세요 이다은님 😀해당 강의는 베리어블이 나오기 이전에 찍은 영상이라 베리어블이 없을 때 네이티브 스타일로 관리한 영상입니다. 현재는 로컬 베리어블로도 토큰을 관리할 수 있고 토큰 스튜디오로도 토큰을 관리할 수 있습니다. 두가지 다 장단점이 있는데요, 로컬 변수 중심(네이티브) 추천 상황디자인 팀 주도, Figma 내부에서 테마/스케일만 잘 돌면 되는 규모Dev Mode로 변수명 노출만으로도 개발 핸드오프가 충분한 팀별도 Git·CI 파이프라인 없이 간단하게 운영하고 싶은 경우→ 컬렉션/모드/에일리어싱을 활용하고, 그라디언트·다중 이펙트는 스타일로 병행Tokens Studio 추천 상황다플랫폼(iOS/Android/Web) 산출물(CSS 변수/JSON/Swift/Kotlin 등)로 자동 변환이 필요GitHub 양방향 동기화로 토큰을 코드처럼 버전 관리·리뷰·배포하려는 경우브랜드/프로덕트가 많아 대규모 테마 조합과 브랜치 실험이 잦은 조직Style Dictionary 등과 CI 파이프라인로 디자이너 변경→개발 산출 자동화를 구축할 팀→ 플러그인에서 토큰 세트 설계 → Git 연동 → CI에서 변환/배포. 그래서 결론은. 작고 단순한 팀/프로덕트: Figma 로컬 변수(+스타일) 만으로도 충분하고, 규모가 크거나 다플랫폼·자동화가 중요한 팀: Tokens Studio + Git/CI로 “토큰을 코드처럼” 관리를 진행합니다. 가장 흔한 베스트 프랙티스는 네이티브(변수/스타일)로 디자인 작업하고, Tokens Studio로 토큰 원천을 JSON으로 관리·배포하는 혼합 전략을 가져갑니다. 감사합니다 :)

borderTransparent 임포트가 안됩니다

안녕하세요 제끼님 😀 토큰 스튜디오의 버전이 변경되어 이제 라이트와 다크모드의 임포트를 직접 입력해주셔야 합니다.내보낸 이후에도 체크로 변경되지 않는점도 있어요, 이 부분은 섹션16의 업데이트 내용 부분을 확인해주세요 감사합니다 :)

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