안녕하세요~'스크롤/텍스트 애니메이션 제작_2' 강의를 듣다보면 $(document).ready(function){}을 이제 사용 안 한다고 설명하시는데 이유도 설명 부탁드립니다~

안녕하세요.경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다!이벤트 객체를 통해서도 다양한 인터랙션을 만들어낼 수 있는데, raycaster를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.

targetX += (x - targetX) * speed; targetY += (y - targetY) * speed;이 코드가 매번 마우스가 움직일 때마다 보간을 구하는 거라면, JS에서는 box.style.top = pageY; box.style.left = pageX;이렇게 포지션만 잡아주고,.box { transition: top second linear, left second linear; }css에서 transition에 각각 top, left에 linear를 주면,targetX/Y의 선형보간이랑 css에서 transition 선형보간이랑 같은 거 아닌가요?다르다면 어떤 부분이 다른지 알고 싶습니다!

안녕하세요. 영광스러운 첫 질문이군요!다름이 아니라 원하는 프레임에 곰이 꿀에 도착하게 하기 위해서 단위 벡터에 다시 dist를 곱해주잖아요. 거리는 변수 이름 그대로 distBearToHoneyVec이니까, 곰에서 꿀까지의 거리인 것 같은데 distanceTo() 함수를 호출하실 때 원점(0, 0, 0) 기준으로 하셨더라고요.제가 잘못 이해한 건지 실수하신 건지 궁금합니다~

- 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요. 안녕하세요. 제가 스스로 영상을 찍어서 해보려고 하니 웹페이지 배경이 하얀색이라 영상 찍을때도 하얀색 바탕으로 하면 좋을거 같다고 생각이 들었는데요. 샘플 예제 동영상도 혹시 하얀색 배경에서 영상 촬영을 하신건지 아니면 프레임 추출해서 이미지를 배경제거를 해서 한건지 궁금해서요! 그리고 또 하나 요즘 애플에서는 스크롤이 아니라 부분적으로 영상처럼 작동하던데 그 기술도 인터랙티브 기술일까요?  (아직 완강은 못해서 질문한 것일수도 있습니다) 

.page:nth-child(2) 에 .back-btn 버튼이 눌리지 않아, 원본 코드를 보니 .page-face 에 transform-style: preserve-3d; 가 추가 되어 있어서 적용했습니다. 그런데, transform-style: preserve-3d; 를 추가하면 .back-btn 버튼은 눌리지만 사진과 같이 나옵니다. transform-style: preserve-3d; 를 추가하지 않으면 원래대로 처럼 나오지만 .back-btn 버튼이 클릭이 안됩니다. 어떻게 해결해야할까요 ??

따라하면서 코드작성 하니까 진행이 더뎌서 부탁드려요

안녕하세요. SCROLLTRIGGER-STARTED 폴더에 있는4-5.Mixed Layout의 index.html 파일을 열어section02의 horizontal 주석을 해제하고보았을때 가로 스크롤이 안나타납니다. 제가 뭐 건드린 것은 특별히 없어서finish폴더의 style.css파일과 비교하였는데도가로 스크롤이 안나타납니다. 이상태에서 해당 강의 중 settings.js를 만져서 가로 스크롤이 안나타나도록 확인을 해야하는데 가로스크롤이 안나타난 상태에서강의를 보면서 settings.js파일을 실습하기가 어려울것 같습니다.. 제가 뭘 잘못한게 있을까요?

primitive는 map을 통해 texture를 불러올 수 없을까요? 다른 텍스쳐 불러오는 연습을 하면서 Material에서는 map이라는 속성을 통해 texture를 불러올 수 있다고 알게 되었는데 primitive에서는 안되서 궁금합니다!

강의 잘 듣고 있습니다!혹시 리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?

섹션8에서 42강의에서 질문드려요...강사님 파일 보고 열심히 수정해보긴 했는데,이미지가 4개인데 1개밖에 나오질 않아서요혹시 몰라 소스를 올려봅니다. 

cdnjs 에서 보면 three.js 버전이 많이 있더라구요,강사님이 선택하신 버전 이외 것을 연결하면 화면이 안뜨고 강사님 영상에 있는 r128 인가를 하면 뜨는데, 혹시 버전의 차이가 있을까요?최신버전이 아닌 많이 사용하는 버전인건지해서요,,,,

갤러리에서 아래 연결주소가 잘못된건지 이미지가 하나도 안나옵니다. const imageMap = new THREE.TextureLoader().load( "https://source.unsplash.com/collection/" + i ); 

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 속성을 사용하는 방법 밖에 없을까요?

navList.forEach((li, index)=>{ const roma = ['I', 'II', 'III']; const arabic = ['1','2','3'] const linkAddr = ['naver.com','google.com','inflearn.com']; // button 링크 주소 li.addEventListener('click',()=>{ if(!playing) { next = index; if(li.classList.contains('active')) return; for(let i=0;i < navList.length; i++) { navList[i].classList.remove('active'); } li.classList.add('active'); const addr = /*html*/`location.href='http://${linkAddr[next]}'`; // button 속성 값 const tl = gsap.timeline() .add(leave[current].play()) .add(titleLeave.play(),'-=1') .set('.title h1',{text:`toystory ${roma[index]}`}) .set('.title p',{text:`토이스토리 시즌 ${arabic[index]}`},'<') .add(enter[next].play()) .add(titleEnter.play()) tl.eventCallback('onComplete',()=>{ const btnLink = document.querySelector('.title button'); // button 요소 가져오기 btnLink.setAttribute('onclick',addr); // button의 onclick 속성 추가 current = next; playing = false; }) playing = true; } }) }) window.addEventListener('load',()=>{ const tl = gsap.timeline() .add(enter1.play()) // enter 타임라인 실행 .add(titleEnter.play()) tl.eventCallback('onComplete', () => { const btnLink = document.querySelector('.title button'); //처음 실행시 button에 속성값 추가 btnLink.setAttribute('onclick',"location.href='http://naver.com'"); //처음 실행시 button에 속성값 추가 playing = false; }) // page03()[1].play() // leave 타임라인 실행 })

안녕하세요. 4강 토이스토리 practice에서 강의 중 선생님께서 "WATCH NOW" 버튼의 href?값을 페이지에 따라 변경할 수 있다고 하셨는데요. gsap을 이용해서 변경할 수 있는 방법이 있는 건지요?아님 자바스크립트 함수 안에서 직접 세팅하는 걸까요?

4.6강 초기 로딩 속도 케이스 비교 세가지 케이스를 적어주셨는데 case1, case3이 같은 건가요?제가 이해를 못한 건가 싶어서 세 번 돌려봤는데 같아 보여서요.

안녕하세요 강의 잘 듣고 있습니다! 공식 문서 보면서 복습하는 중인데 공식문서 예제에는   motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } 처럼 path와 align이 같은 요소로 지정되어 있습니다.그래서 codepen을 이용해서 강의 내용처럼align에 움직이는 요소를 지정해봤는데 경로에서 붕 떠서 이동합니다. 마찬가지로 강의 샘플 코드도 align에 경로를 넣어서 한번 테스트 해봤는데 이번에는 호랑이가 너무 붕 떠서 이동합니다. 강의 내용에서는 align에 움직이는 타겟을 넣으면 된다고 하셨는데이건 svg 코드 구성에 따라서 다른건가요??? 공식 문서에 따르면 움직이는 요소를 경로에 맞춰 정렬 해주는게 align의 역할이라고 하는데추상적인 설명인 것 같아서 잘 이해가 안됩니다..! align에 대해 제가 정확히 이해하고 있는게 맞는지,그리고 align에 들어가는 요소는 정확히 어떻게 구별해 넣는게 좋은지 궁금합니다 

강의에서 레이아웃을 담당하는 Sidebar, Header 컴포넌트를 만들때 Props으로 children을 받고 렌더링 하는 방식으로 만들었는데 이렇게 만든 이유가 있을까요?지금까지 진행한걸 계층별로 생각해보면최상위 Root->Sidebar->Header->... 등 형제 노드는 없고 자식 노드 형태로 계속 깊어지는구조.------------아래의 방법과 비교해서 궁금합니다.아래 코드와 동일하지 않더라도,Sidebar, Header 컴포넌트가 children과 분리된 구조.<body> <Sidebar/> <div> <Header/> <main>{children}</main> </div> </body>