mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼 실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면 pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
키프레임 wrap around 실습하다가 궁금해서 여쭤봐요! 해설해주신 대로 어몽이를 x를 420으로 하면 부모인 stage 가로사이즈 500px이 바뀌면 어몽이에 적용한 420도 같이 바뀌어야 해서 부모 사이즈를 기준으로 하려면 left나 right 속성을 사용하는 방법 밖에 없을까요?
안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는 motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다. 그래서 codepen을 이용해서 강의 내용처럼 align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데 이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데 추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지, 그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
강의에서 레이아웃을 담당하는 Sidebar, Header 컴포넌트를 만들때 Props으로 children을 받고 렌더링 하는 방식으로 만들었는데 이렇게 만든 이유가 있을까요? 지금까지 진행한걸 계층별로 생각해보면 최상위 Root->Sidebar->Header->... 등 형제 노드는 없고 자식 노드 형태로 계속 깊어지는구조. ------------ 아래의 방법과 비교해서 궁금합니다. 아래 코드와 동일하지 않더라도,Sidebar, Header 컴포넌트가 children과 분리된 구조. <body> <Sidebar/> <div> <Header/> <main>{children}</main> </div> </body>
안녕하세요 ScrollSmoother에 대해 질문드릴게요! 이번 강의 너무 잘보고 있는데 , 다른분의 질문을 보고 ScrollSmoother가 무료가 되었다라고 말씀하셔서 활용해보려고 합니다. 사용법이 ID를 레퍼하여 자식 div를 tramsform으로 따라오는식으로 스무디 효과를 주는건 확인했습니다 근데 만약에 페러렉스 효과를 백그라운드 이미지에 반영해보려니 tramsform의 크기를 따라가는지 background fixed같은건 전혀먹히지가 않는거같네요 .. 스크롤링하면 부드럽게 스무스 하게 되면서 bg의 포지션도 살짝움직이는 식으로 구현해보려 했는데 혹시 방법이 없을지 질문드립니다. ㅜ
안녕하세요, 파트1부터 3까지 완강한 1인입니다. 파트3을 듣던 당시에는 GSAP ScrollSmoother 플러그인이 유료였는데, 얼마전에 모든 플러그인이 무료로 전환되었더라고요~ 그래서 강의 당시에 일부 플러그인들을 대체해서 강의해주신 부분이 있었는데, 혹시 해당 부분에 대해서 추후 내용이 업데이트될 예정이 있을지 문의드립니다. ps. 모든 플러그인이 무료로 전환되면서 좀더 다양한 애니메이션이 가능해지니, 추후 파트4도 매우 기대가 되는 중입니다.
안녕하세요. 공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다. apple-clone-v11/@simple-version/index.html apple-clone-v11/@ipad-stroke-effect/index.html
아무도 질문을 안남긴것으로보아 이 강의는 인기가 없나보네요.. 저는 강의 출시하시자마자 구매해놓고 묵혀놨다가 이제야 조금씩 꺼내보고있는데요 궁금한게있습니다. cursor에게 시키면서 코드를 짜고계신데, 제가 솔직히 이해를 못하겠는 코드라면 어떻게해야하나요? 취미로 하는거라면 괜찮은데 이걸로 밥벌어먹고 살고있다면요?..ㅠㅠ 앞으로의 공부방향과 중점을 어디에 둬야하는지를 잘 모르겠습니다. 그리고 저는 애플클론코딩 강의도 들었던 학생인데요, framer-motion이라는 아무 강력한 css 라이브러리가있잖아요? 이걸 사용하면 애플클론코딩에서했던 그런것들을 간소화시키고 더 쉽게 구현할 수 있는거같습니다. 선생님도 framer-motion 자주 사용하시나요? 또 유튜브는 안하시나요? 리액트+framer-motion으로 인터랙티브효과 주는것도 한번쯤 보여주셨으면 좋겠습니다.
사진처럼 터치를 하고 드래그를 하면 카메라가 돌아가는것이 아니라 웹 화면 자체가 끌려 가는데.. html, canvas, body 에 touch-action 옵션을 none으로도 줘보고 touch 이벤트들에 preventDefault도 줘보고 했지만 해결이 되질 않습니다.. 터치 드래그를 하면 moveMentX와 moveMentY의 값은 잘 출력되는데 카메라가 회전을 하지 않습니다. 데스크탑에서 mousemove는 제대로 카메라가 돌아가는데, 모바일버전에서 touchmove는 카메라가 돌아가질 않네요.
