inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

안녕하세요 이렇게 나오는데..

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
웹개바르르 댓글 1 좋아요 1 조회수 441

짤려서 나오는 이유를 모르겠어요

미해결

UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략

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; }

  • HTML/CSS
  • 포트폴리오
  • 반응형-웹
  • gsap
  • scrolltrigger
초보개발자 댓글 1 좋아요 0 조회수 439

강사님 다중요소제어 stagger 질문있습니다

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

vs코드에서 코드를 치면서 보는중인데 새로고침하면 첫번째 요소가 이미 위로 올라간상태로 시작되어서 어색한데 이 부분은 어떻게 해결 가능할까요? duration을 좀 줘보고 해봐도 첫번째 박스는 위로 좀 올라간상태에서 시작하네요 delay: 0.6 정도주면 대충 맞긴한대 delay 주는 방법밖에는 없겠죠? gsap.to(".stage .box", { y: -50, stagger: 0.2, });

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
웹개바르르 댓글 1 좋아요 2 조회수 475

노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.

미해결

웹 애니메이션을 위한 GSAP 가이드 Part.01

https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d 노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. .. 제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠... 진도를 나갈 수가 없어요. ㅠ.ㅠ 확인부탁드립니다.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
Stella 댓글 1 좋아요 1 조회수 739

이후에 출시될 강의엔 유료 플러그인이 사용되나요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요? 궁금해서 질문해봅니다! 🤔

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
taylous 댓글 1 좋아요 1 조회수 322

autoAlpha를 사용한다고 해도 성능상의 이점은 없는거 아닌가요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

Q. FOUC에 대한 보완으로 autoAlpha 를 사용하면 효율적 인 이유가 뭘까요? FOUC 강의에서 authAlpha를 사용함으로써 GSAP가 효율적으로 visibility를 visible로 바꿀 수 있다 라고 말씀하셨습니다. 그런데 생각해보니 GSAP 객체도 해당 Element의 style에 접근해서 attribute 값을 바꾸는게 아닌가? 하는 생각이 들어서 질문드려봅니다. 이렇게 되면 사실 문법적인 설탕(syntatic sugar) 같은게 아닌가요? 🤔

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
taylous 댓글 1 좋아요 1 조회수 572

다음강의 Part.03 관련 질문

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

안녕하세요 part.02 강의 완강했습니다👍 너무 좋은 강의라 다음 강의 스크롤트리거 관련 질문겸 반영됐으면 하는 부분이 있어서 질문을 올립니다 part.03 강의에서 스크롤트리거 강의시 반응형으로 제작하는 강의도 포함되어있을까요? 예를 들어 pc에서는 스크롤시 위에서 아래로 내려가는 모션이 모바일에선 좌에서 우로 가는것모션처럼 코드자체는 여기저기 검색해서 구현은 가능하지만 선생님강의처럼 효율적으로 작성하는 방법이 있을까 하는 궁금에서 질문드립니다 이번강의에서 타임라인을 효율적으로 관리하시는거보고 꼭 포함되면 좋을것 같아서 없다면 포함해주시면 감사합니다ㅠㅠ

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
플린 댓글 1 좋아요 3 조회수 455

강의노트 관련

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

강의노트는 어디서 다운 받나요 ?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
JS 댓글 1 좋아요 1 조회수 381

클로저 질문

해결됨

웹 애니메이션을 위한 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; } }); 로 변경하셨는데 변경전 코드는 잘 되는데 변경된 코드는 동작을 하지 않습니다 혹시 제가 잘못 적은 부분이 있을까요?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
플린 댓글 1 좋아요 2 조회수 379

질문이 있습니다!

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

파트2 강의를 들을때도 gsap유료버전을 구매하지 않아도 수업을 다 따라갈수 있나용?

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
hiems1103 댓글 1 좋아요 1 조회수 508

기초 트위닝 질문

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

기초 트위닝 진행중인데 <div class="orange"></div>라고 적었을때 애니메이션이 작동을 안해요 ㅠㅠ <div class="orange">22</div> 이런식으로 태그 안에 내용이 있을때만 작동을 하는데 왜그러는 걸까용...

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
hiems1103 댓글 1 좋아요 1 조회수 395

선생님 Advanced 강의가 절실합니다.

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

좋은 강의 감사합니다. 항상 웹을 만들면서 뭔가 아쉽다 부족하다 생각햇는데 그게 GSAP로 채워지는 것 같습니다. advanced 강의는 언제 나오는지 정보좀 주실 수 없을까요? scrollTrigger와 반응형 강의가 절실합니다.ㅎㅎ 가능하다면 React나 Next.JS와 같은 프레임워크 호환 파트도 추가해주실 수 있나요.... 감사합니다.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
월터 댓글 1 좋아요 1 조회수 499

어몽이가 안나와요!! 저만 그럴까요?

미해결

웹 애니메이션을 위한 GSAP 가이드 Part.01

안녕하세요! 키프레임 파헤치기 실습예제에 어몽이가 안 나오는 데 저만 그럴 걸까요?ㅠㅠ 결과물 화면에 아무것도 뜨지 않습니다. 백그라운드에 있는 url 이미지는 열리는데 말이죠...

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
sun 댓글 2 좋아요 1 조회수 541

추후에 반응형에 관련된 강의 내용도 포함될까욥,,?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

선생님~ 혹시 gsap 심화강의(scrollTrigger 포함)에 반응형 관련 강의도 있을까요 ㅠㅠ? gsap 공부하면서 가장 어려운게 반응형인 것 같아요 ㅠㅠ 비율 구하기나, 크기조정, 위치값 같은게 너무 어렵네용 ;ㅅ;

  • 인터랙티브-웹
  • javascript
  • HTML/CSS
  • gsap
밀크티 댓글 1 좋아요 1 조회수 768

인기 태그

인프런 TOP Writers

주간 인기글