묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
Y축 섹션 고정스크롤애니메이션 강의중
Y축 섹션 고정스크롤애니메이션 강의에서 스크롤을 올리면 border-radius준 영역 밖으로 bg가 보이는데 어떻게 없애면 될까요??
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
제이쿼리 플로그인을 쓰나요?
강의듣고 자바스크립트로 코드 변경해보고싶은데... 질문글에 있는글을 보니 제이쿼리뿐아니라 제이쿼리를 사용한 플로그인을 사용한다고 되어있던데 제이쿼리를 사용한 플로그인을 사용하나요?...제이쿼리를 사용한 플로그인은 따로 자바스크립트로 교체가 안되는건가요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
이 코드를 모르겠어요
이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요.content: attr(data-char);*혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의 보던중 사용중인 툴이 궁금해서 여쭤봅니다.
강의를 보던중 강사님께서 callback 이라는 뜻을 찾기위해 특정 위젯 같은 것을 실행 후 검색어 입력 후 파파고로 실행 하시던데.혹시 이 툴이 뭔지 알수 있을까요?윈도우 사용자 입니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션10에 자료파일이 안보여요.
섹션10 스크롤에 반응하는 이미지와 텍스트 애니메이션 제작에 자료파일이 안보여요.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
gsap 상업적 사용여부
Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
fork 주소가 어떻게 되나요?
강의노트 주소는 어디에 있나요 아무리 찾아봐도 없네요
-
미해결당신의 창의적인 웹을 만들어보세요: Parallax ScrollTrigger 마스터 클래스
예제 애니메이션 세로 스크롤 적용
안녕하세요! 강의는 이미 샀는데 궁금한게 생겨서 여기에 문의드립니다. 현재 예제 애니메이션에서는 세로 스크롤 스무스가 적용이 안되어 있는걸로 확인이 되는데요!혹시 적용이 안된 이유가 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 수업자료를 다운받았는데 중간중간 파일이 없어요 ㅠㅠ
영상 우측상단에 수업자료를 다운받고 열어보니 중간중간 없는 파일들이 있습니다 ㅠㅠ 저만 그런건지..
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 이렇게 나오는데..
오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
짤려서 나오는 이유를 모르겠어요
JS 코드$(function(){ $(".con03 .list").simplyScroll({ speed : 4, pauseOnHover : false, pauseOnTouch : false }) })CSS 코드그리고 그림이 글자 위로 보여요.simply-scroll .simply-scroll-clip { overflow: hidden; transform: rotate(5deg) translate(50%, 400px) scale(1.1); opacity: 0; } .simply-scroll .simply-scroll-clip .simply-scroll-list li { float: left; width: 400px; filter: brightness(50%); } .simply-scroll .simply-scroll-clip .simply-scroll-list li img { width: 100%; } .con03.motion .simply-scroll .simply-scroll-clip { transform: rotate(5deg) translate(0%, 400px) scale(1.1); opacity: 1; transition: 1.2s; transition-delay: 0.3s; }
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
강사님 다중요소제어 stagger 질문있습니다
vs코드에서 코드를 치면서 보는중인데 새로고침하면 첫번째 요소가 이미 위로 올라간상태로 시작되어서 어색한데 이 부분은 어떻게 해결 가능할까요? duration을 좀 줘보고 해봐도 첫번째 박스는 위로 좀 올라간상태에서 시작하네요 delay: 0.6 정도주면 대충 맞긴한대 delay 주는 방법밖에는 없겠죠? gsap.to(".stage .box", { y: -50, stagger: 0.2, });
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. ..제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠...진도를 나갈 수가 없어요. ㅠ.ㅠ확인부탁드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
이후에 출시될 강의엔 유료 플러그인이 사용되나요?
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요?궁금해서 질문해봅니다! 🤔
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?
Q. FOUC에 대한 보완으로 autoAlpha를 사용하면 효율적인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다.이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
다음강의 Part.03 관련 질문
안녕하세요 part.02 강의 완강했습니다👍너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요?예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의노트 관련
강의노트는 어디서 다운 받나요 ?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
클로저 질문
애니메이션 재생, 정지, 재시작 버튼 구현 강의에서 3:55에 클로저를 설명해주신 내용에서let toggle = false; button.addEventListener('click',()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; });이부분을 button.addEventListener('click',()=>{ let toggle = false; return ()=>{ if (!toggle) { animation.pause(); } else { animation.play(); } toggle = !toggle; } });로 변경하셨는데 변경전 코드는 잘 되는데 변경된 코드는 동작을 하지 않습니다혹시 제가 잘못 적은 부분이 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
질문이 있습니다!
파트2 강의를 들을때도 gsap유료버전을 구매하지 않아도 수업을 다 따라갈수 있나용?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
기초 트위닝 질문
기초 트위닝 진행중인데<div class="orange"></div>라고 적었을때 애니메이션이 작동을 안해요 ㅠㅠ<div class="orange">22</div> 이런식으로 태그 안에 내용이 있을때만 작동을 하는데 왜그러는 걸까용...