묻고 답해요
138만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
완성본은 따로 없는건가요?
자료를 받으면 이미지랑 캡쳐본만 있는데 완성본은 없는건가요?cctv0820@naver.com 입니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout (1) 관련 재질문드립니다.
범샘님! 빠른 답변 및 업데이트 감사합니다,답변해주신것처럼 section1, section4에서 스크롤문제가 발생합니다.이 부분은 질문드리기 전에 확인한 부분이라 해결하였으나,다만 답변해주신 두번째 경우는 제가 드린 질문의 방향과 조금 달라 재질문 드립니다. section4까지 스크롤을 내린후, 다시 section3까지 스크롤을 end-section3 지점까지 올리고, 다시 section4로 스크롤 할 경우 스크롤이 작동되지 않습니다.이 부분은 첫번째 질문 드린 경우와 비슷한 상황인거 같은데, 이번에는 반대로 스크롤하는 경우라 direction을 down으로 하는 조건문을 추가하면 되는건지, 조금 더 명확한 답변과 코드를 확인하고 싶어 다시 질문드립니다. 여러모로 바쁘실텐데, 감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout (1) 강의중 질문 드립니다.
안녕하세요, 쉬운 강의 덕분에 gsap 을 쉽게 접하고 사용할 수 있어서 감사합니다.근데 해당 부분 구현중에 범샘께서 작성하신 코드(ScrollTrigger-finished)에서 확인해보면1) section3 도달 후, section2로 스크롤을 올리는 경우2) section4 도달 후, section3에서 다시 section4 로 스크롤을 내리는 경우해당 2가지 경우에서 section03을 기준으로 스크롤이 위아래로 작동을 잘 하지 않습니다.if(currentPageIndex === 3) return;때문인 것 같은데, 스크롤을 자유롭게 올렸다 내렸다 하면서 페이지를 확인할 수 있도록 하려고 하는데 잘 안되네요.코드를 어떤 방식으로 수정해야할지 질문 남깁니다.감사합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
완성된 코드 자료 받아볼 수 있을까요?
안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다.수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다.참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
이미지 엑박
안녕하세요 선생님~다름이 아니라 강의 파일 내에 "https://source.unsplash.com/random..." 이런 주소를 가진 이미지들이 모두 엑박으로 떠서 글 남깁니다!확인 부탁드립니다!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션 14 테두리 밖 색상 제거
안녕하세요 강의 너무너무 잘 듣고 있습니다.아무 지식도 없이 쓰려니까 너무 막막했는데 강의 감사합니다 !섹션 14를 만들었는데 cloneWrap에 border-radius를 주니까 테두리 밖 색상이 계속 바뀌면서 보이네요 이 부분을 제거하고 싶어서요:) 혹시 가능한 방법이 있을까요 ? 답변 주시면 감사하겠습니다~!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
UI관련 문의드립니다..!
안녕하세요 범쌤!강의 너무 재밌게 잘 듣고 있습니다.선생님의 강의를 들으면서 사이드 프로젝트에 바로바로 적용해보려고 시도중인데요. 레퍼런스 사이트를 찾아보면서 구현하고 싶은 UI가 있는데 도저히 감이 잡히질 않아 문의드립니다..!https://www.studio-particle.com/위 링크의 해당 영역 부채꼴 UI는 어떤 방식으로 그린걸까요.. ㅠㅠ ?(제 개인적인 생각으로는 자식요소들을 부채꼴로 위치를 지정하고 부모요소를 스크롤에 따라 rotate 시키는 방법이 효과적이지 않을까? 하는 생각을 해보았습니다.)여러방면으로 검색하고 찾아봐도 답이 나오질 않아 문의드려봅니다..!항상 강의 잘 듣고 있습니다. 친절하고 세심한 강의 감사합니다!
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
선생님
선생님 안녕하세요헤더 영역 스크롤 방향 이벤트 동적 구현이 되지 않아문의 드립니다해당 파일 알집으로 압축하여 보냈는데하기 내용처럼 뜨면서 보내지지가 않습니다....확인 부탁드립니다감사합니다. 파일 첨부 실패첨부할 수 없는 파일과 사유는 아래와 같습니다.첨부파일 목록파일명사유헤더스크롤이벤트.Zip관리자가 제한한 파일 형식
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout 모바일 터치
강의 내용에선 fullpage.js 대신 직접 gsap을 활용해서 원페이지 형식을 만드는 방법을 알려주셨는데 물론 fullpage보다 직접 gsap으로 구현시 원하는 기능을 커스텀하기는 좋지만 모바일 환경에서(터치관련해서) 대응하기 쉽게 fullpage를 사용해는 경우가 많아서 혹시 강의에서는 원페이지 관련해서 터치 이벤트에 대한 내용이 없어서 따로 사용하시는 방법이 있으신가요?모바일에서 터치 드래그시 일정부분 섹션이 따라서 스크롤 되다가 터치를 놓은 시점에서 얼만큼 비율을 넘기는지에 따라 원래섹션으로 아니면 다음섹션으로 가는 기능을 추가해야하는데 gsap기능을 혼합해서 사용시 onLeave시 충돌이 생길것 같아서.. 물론 직접 만들면 되지만 혹시 참고할만한 예시코드가 있으신가요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션6 질문입니다
스크롤 내렸을 때는 문제가없는데 스크롤 올릴 시 .con02의 .worklist와 .title이 높이 올라갔다가 다시 원위치되는 현상이 발생합니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 첨부 파일은 어떻게 받나요??
제 메일은 rkddus3177@naver.com 입니다
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
궁금한게 있습니다~!
안녕하세요~!ScrollTrigger 실무 활용_visual영역 제작하기 강의를 보던중 궁금한게 생겨서 여쭤봅니다! 8분 25초쯤보면 html,css 작업까지만 했을때 img_1의 높이만큼 스크롤이 생겼는데,10분 47초에 scrollTrigger를 적용해주니까 높이값이 많이 늘어나있던데혹시 왜 늘어나는지 알수있을까요??스크롤트리거를 사용하려면 스크롤이 되어야하는건 알겠지만 따로 높이값을 지정하지 않았는데 어떤것을 기준으로 늘어난건지 궁금해서 여쭤봅니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
노션 링크 보는 곳
강의 수강중인데 노션 링크는 어디에서 볼 수 있나요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
반응형 관련해서 질문드립니다.
안녕하세요. 강사님강의 완강하고 반응형 작업을 테스트 해보던 중에 잘 풀리지 않는 점이 있어 문의 드립니다.아래 코드에서 반응형 matchMedia 로 해상도 별로 나눠서 작업하려던 중에 pin이 끝나고 bottom 영역이 반쯤 올라왔을때 개발자모드에서 기기 툴바를 사용해 모바일 사이즈로 전환해 버리면 pin된 영역이 틀어지는 현상이 발생합니다. 이전 가로와 높이값을 그대로 유지하고... 원인과 이유를 알 수 있을까요?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <style> * {margin: 0; padding: 0;} .wrap { overflow: hidden; } .top { height: 400px; } .center { position: relative; overflow: hidden; width: 100vw; height: 100vh; background: purple; } .bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 40px; background: yellow; } .bottom { height: 2000px; background: gray; } .box { width: 200px; height: 200px; background: orange; } </style> </head> <body> <div class="wrap"> <div class="top"></div> <div class="center"> <div class="bg"></div> </div> <div class="bottom"> <div class="box"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script> ScrollTrigger.create({ trigger: '.wrap .center', start: 'top top', end: "+=2000", animation: gsap.to('.wrap .bg', {width: '100%', height: '100%', borderRadius: 0}), pin: true, scrub: true, invalidateOnRefresh: true, markers: true, }) const wrapper = document.querySelector('.wrap'); const box = document.querySelector('.box'); const mm = gsap.matchMedia(wrapper); mm.add('(max-width: 1024px)',()=>{ gsap.to(box,{ backgroundColor: '#000', }) console.log('m'); }) mm.add('(min-width:1025px)',()=>{ gsap.to(box,{ rotation: 360, duration: 2, repeat: -1, ease:'none' }) console.log('pc'); }) window.addEventListener('resize', ScrollTrigger.update) // window.addEventListener('resize', ScrollTrigger.refresh) </script> </body> </html>
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 너무 잘 듣고있습니다. 섹션6번에서 질문이 있습니다.
안녕하세요. 좋은 강의 감사합니다.센셕6번에서 스크롤트리거를 하셨잖아요. title를 fixed로 시키셨습니다..fromTo('.worklist' ,{margin:'0 auto'} ,{margin:'100vh auto 0', duration:'1',ease: "power3.out"},0)그런다 다시 올리면 버버벅 거리는 현상은 어쩔수 없는 현상일까요?margin-top가 올라가면 다시 0으로 돌아가면서 버벅거리는 현상같은데, 어쩔수 없는 현상인지 여쭤봅니다.혹시몰라 사진 첨부드려요~회신 주시면 너무 감사드릴겠습니다.항상 좋은 강의 많이 부탁드립니다.~
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
강의 자료
안녕하세요.강의 잘 보고있습니다.강의에 사용된 이미지등 자료들은 어디서 받을 수 있을까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
header영역 스크룰방향이벤트 제작 강의 에서
header active가 실행하지 않습니다 오타가 있나 아무리 봐도 똑같이 코딩된 거 같은데 .. 왜그럴까요???
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션 5 클립패스 - 동영상이 중심에서 커지는게 아니고 우측하단에서 커져요,,
왜 그런걸까요? ;; 이것때문에 진도를 못나가고있어요 ~ㅠㅠ 파일을 똑같이 복사해서 동영상에서 이미지로 변경하면 선생님처럼 중심에서 애니메이션이 진행되네요...왜 동영상을 넣으면 우측하단에서 동영상이 진행될까요? 동영상 파일이 좀 크지만 선생님 메일에 보내볼게요~ ㅠㅠ
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
코드 요청합니다
5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요wssksms@naver.com
