묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
header영역 스크룰방향이벤트 제작 강의 에서
header active가 실행하지 않습니다 오타가 있나 아무리 봐도 똑같이 코딩된 거 같은데 .. 왜그럴까요???
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션 5 클립패스 - 동영상이 중심에서 커지는게 아니고 우측하단에서 커져요,,
왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요...왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
코드 요청합니다
5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요wssksms@naver.com
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
스크롤라 js에대해서..
선생님 질문이있습니다. 스크롤라 제이에스를 $(document).ready(function(){ $(".animate").scrolla({ mobile:true, once:false })})작성하고,html 에 동일하게 넣었는데<section class="visual animate" data-animate="motion">클래스가 motion 이렇게 붙는게아니라.. 선생님과 다르게 animate__motion 이렇게 붙습니다 혹시..이유를 할수있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
ScrollTrigger의 end와 toggleClass
안녕하세요, 선생님.섹션2 Advanced Trigger - practice 예제에서fixedHeader() 함수를 통해 헤더가 pin되어 start 지점부터 fixed 처리가 되잖아요~이와 동시에 fixed 될 때 특정 클래스(toggleClass : "active")를 넣어서 스타일을 다르게 주려고 했거든요.그런데 end 마지막 지점에 스크롤이 닿으면 fixed는 되어있지만 class는 사라지더라고요.혹시 다른 방법이 있을까요? function fixedHeader(){ ScrollTrigger.create({ trigger: '.nav_container', start: 'top top', // endTrigger:'.footer', end: 'max', pin: true, pinSpacing: false, toggleClass : "active" }) }
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
Text Effects(2)는 Text Effects(1)영상에 포함돼있는 것 같아요!
Text Effects(1) 의 11분~ 하고 내용이 같아요😄
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
nav위에 마우스를 올리면 스크롤이 안돼요 😢
질문1)nav위에서 스크롤이 안되는거랑 nav에 스크롤바가 가려지는걸 해결하고싶어서 컨테이너 안에 요소를 넣었는데 당연하게도 fixed가 안되더라구요😢 고민하다가 마커스위치 셋팅과 같은 방식으로 고정 하면 될것같아서 markers함수 안에gsap.set(nav, { marginTop: offset.y });요렇게 추가해줬는데 스무스스크롤바를 사용할때 fixed는이렇게 하는게 맞을까요?질문2)파트3은 특히나 강의 소리가 작은데 혹시 키워주실 수 있으신가요? 😢
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
SplitText를 순수 자바스크립트로 써봤어요
// const { chars } = new SplitText('.stage h1', { type: 'chars' }); function splitTextChars(elem) { const textElem = document.querySelector(elem); const letters = textElem.textContent.split(''); let newHTML = ''; letters.forEach(letter => { newHTML += /* HTML */ ` <div style="position:relative; display:inline-block">${letter}</div>`; }); textElem.innerHTML = newHTML; return [...document.querySelectorAll(`${elem} div`)]; } const chars = splitTextChars('.stage h1');복습중에 유료플러그인이나 라이브러리 없이 써보고싶어서 만들어봤습니다 ! 맞는 코드인지는 모르겠지만 혹시 참고하실분이 계실까 싶어 남겨둘게요 !ㅎㅎ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
.left는 quickTo를 쓰지 않는 이유
.left도 지속적으로 x를 호출하니 quickTo를 쓰면 더 좋지않을까 라고 생각했는데 .left는 to로 컨트롤하시는 이유가 있을까요?quickTo의 기본값이 픽셀이라 퍼센트 넣으면 동작이 이상해지던데 혹시 이런 이유일까요?!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
CSS 적용 안됨
안녕하세요, 맨 첫 강의인 <header영역 레이아웃> 수업을 듣고 있는데, 강의 내용과 똑같이 진행하였으나 Css가 적용되지 않아 질문 드립니다. Google에 검색을 통해 쿠키 삭제, link대신 @import 사용 등을 실행했으나 결과는 똑같았고, F12 눌러 개발자용 모드로 확인 해보았는데 css가 작동되지 않는다는 알림만 뜰 뿐 해결책을 찾지는 못했습니다. 이러한 경우에 어떻게 해결할 수 있을까요? 미리 답변 감사드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
영상 순서 오류
안녕하세요. 선생님.섹션 4 - Layout [Horizontal Layout] 대한 영상 순서가 잘못 올라간듯합니다. (1)과 (2)는 중복되어 보이고, 첫번째 영상인 (3)과 이어지지 않고 있습니다.확인 부탁드리겠습니다~
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
노션 링크 복제 가능 여부 문의 드립니다.
안녕하세요~ 선생님!덕분에 GSAP을 아주 재미있게 공부하고 있습니다~다름아니라 노션에 공유되고 있는 강의 자료가 PART2는 복제가 가능하도록 설정이 되어있는데, PART1과 PART3는 복제가 불가하더라고요~혹시 복제가 가능하도록 가능하실까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
[3D 텍스트효과(2)] GSAP을 위한 애니메이션 Timeline flow"기획", 이렇게 하면 될까요?
안녕하세요,애니메이션 Timeline을 기획(정의)하는 법(방식)?에 대해 문의드립니다! 섹션, "3D 텍스트효과(2)" 에서인터벌 단위로,duration, stagger, pause, 각각의 value 계산 법을 알려주셨는데요 강좌에서 나온 예시 SVG 이미지 보면서,저렇게 애니메이션을 정의하면 되겠다,인사이트를 얻었습니다. 문득, 범쌤께서는 어떻게 애니메이션 flow를 정의 하시는지,관점이나, 포인트가 궁금해졌습니다!(이미 강의에서 SVG 이미지로 보여주셨지만, 혹시 더 있을까봐서요,,,) 강의 내용처럼,애니메이션을duration,stagger,pause,delay 단위로 배치하면, GSAP을 적용하는데 용이 하다 라고 이해하면 될까요?! 블럭 맞추듯 척척, 애니메이션이 구현되는 과정이 신기하네요! 감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
map으로 배열을 만들지 않아도 괜찮을까요?
planet.forEach(planetName => { /* html */ $('.space').insertAdjacentHTML( 'beforeend', `<div class="solar_system" data-planet-name="${planetName}"> <div class="planet ${planetName}"> <div class="overlay"></div> <h2>${planetName}</h2> </div> </div>` ); });이렇게 처음부터 forEach로 요소를 만들어도 괜찮나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
애니메이션 재생헤드를 처음으로...
안녕하세요 선생님 1.어제 질문드린 내용(forEach로 다중 요소에 중복 이벤트 걸기)은 마지막에 말씀해주신'gsap.to(item,{rotation:”+=360”}) 으로 작성해보세요 ' 코드로 해결을 하였습니다. 감사합니다.그런데 그전에'그럴경우 애니메이션이 종료 후 애니메이션의 재생헤드를 처음으로 돌려놓는 코드를 작성해 주시거나' 라고 말씀해주셨는데... 이게 어떻게 하는건지 도저히 모르겠어요..ㅜㅜㅜ예시코드를 시간되실때 한번 보여주셨음 해요..(아직 많이 부족합니다..이해 부탁드려요..ㅜㅜ)시간되실 때 천천히 해주셔도 됩니다.항상 똑부러지는 강의 잘 듣고 있습니다.감사합니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
let tl = gsap.timeline(); tl.to(".dash",{opacity:1, backgroundColor:'yellow'})안녕하세요!강의를 듣다가, 궁금함이 생겨 문의 드립니다, #질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?변수 tl과 같이, timeline()을 호출한 함수를 변수에 정의 할 때, let으로 해야 할지, const로 해야 할지궁금함합니다.const tl = gsap.timeline()let tl = gsap.timeline()함수를 할당하는 변수에 주로 const 변수에 담아 사용해와서,강좌에서는 let으로 정의해주신 부분에 의미가 있을까,궁금함이 생겼습니다!GSAP도 JS다 보니,사용자가 실수로 이미 정의한 tl 변수에 다른 애니메이션도 추가할 수 있는 위험이 있고 그럴까요??강의 초반부에 gsap에 다른 값을 할당하면 안된다는 부분과 어떤 연관성이 있는걸까요?GSAP도 JS 라이브러리 다보니, 변수 정의하는 것도 let과 const로 각각 정의할 때 차이점이 있지 않을까 해서 문의 드렸습니다! #질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?GSAP 파트3을 수강하기 위해, 열심히 정주행중입니다!감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
forEach안에서 gsap을 사용할 때 이벤트가 한번밖에 안걸리는 문제
const box=gsap.utils.toArray('.box'); box.forEach(function(item){ item.addEventListener('click',function(){ gsap.to(item,{ rotationY:360, duration:1, ease:'none' }) }) }) 안녕하세요 강의 잘 보고있습니당공부하다가 질문이 생겨 문의드려요..gsap을 forEach안에서 사용해서 애니메이션을 줄려고합니다.위처럼 코드를 적으면 동작은 잘되는데 클릭이 한번밖에는 안되네요..이 문제를 해결할 수 있을까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
안녕하세요 강사님
이번에 업데이트 해주신 gsap 수업자료에 json 파일은 vscode를 사용해야지만 확인이 가능한건가요?이전 영상과는 수업자료가 조금 다른거같아 질문드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
gsap.set() vs gsap.default()
gsap.set(), gsap.default() 두 가지 모두트윈의 값을 미리 셋팅하는 역할을 하는데 어떤 상황에서 어떤 것을 사용해야할지 감이 잡히지 않습니다.
-
해결됨GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
영상 오류 확인 요청 드립니다.
섹션 14 5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)ScrollTrigger 실무활용_ScrollTrigger Script적용영상 오류 확인 요청 드립니다.4분 37초 정도 부터 30분 50초 정도 까지 블랙 화면(소리 X)으로 나옵니다.확인 후 회신 부탁 드립니다.