월 31,240원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 애니메이션을 위한 GSAP 가이드 Part.03
OneScroll Layout 모바일 터치
강의 내용에선 fullpage.js 대신 직접 gsap을 활용해서 원페이지 형식을 만드는 방법을 알려주셨는데 물론 fullpage보다 직접 gsap으로 구현시 원하는 기능을 커스텀하기는 좋지만 모바일 환경에서(터치관련해서) 대응하기 쉽게 fullpage를 사용해는 경우가 많아서 혹시 강의에서는 원페이지 관련해서 터치 이벤트에 대한 내용이 없어서 따로 사용하시는 방법이 있으신가요?모바일에서 터치 드래그시 일정부분 섹션이 따라서 스크롤 되다가 터치를 놓은 시점에서 얼만큼 비율을 넘기는지에 따라 원래섹션으로 아니면 다음섹션으로 가는 기능을 추가해야하는데 gsap기능을 혼합해서 사용시 onLeave시 충돌이 생길것 같아서.. 물론 직접 만들면 되지만 혹시 참고할만한 예시코드가 있으신가요?
- 해결됨웹 애니메이션을 위한 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 가이드 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.03
ScrollTrigger의 animation에 함수호출
function rotation_text(){ const tl = gsap.timeline({defaults:{duration:2}}) tl .to('.container6>.textbox',{ rotation:720 }) .to('.container6>.textbox',{ scale:5 }) // .to('.container6>.textbox',{ // opacity:0 // }) } ScrollTrigger.create({ trigger:'.container6', start:'top', end:'+=2000', scrub:1, pin:true, markers:true, animation:rotation_text() })안녕하세요 선생님 좋은 강의 항상 감사하면서 공부하고 있습니다.다름이 아니라 위 코드처럼 타임라인을 함수로 등록하여 사용하고 싶은데요..위의 코드를 실행하면 스크롤트리거에 걸리지 않고 이미 함수가 실행되어 container6으로 내려오는데 제가 뭘 잘못했을까요...ㅜㅜ고민고민하고 이리저리 뜯어보다 질문드립니다.
- 해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
영상 순서 오류
안녕하세요. 선생님.섹션 4 - Layout [Horizontal Layout] 대한 영상 순서가 잘못 올라간듯합니다. (1)과 (2)는 중복되어 보이고, 첫번째 영상인 (3)과 이어지지 않고 있습니다.확인 부탁드리겠습니다~
- 해결됨웹 애니메이션을 위한 GSAP 가이드 Part.03
노션 링크 복제 가능 여부 문의 드립니다.
안녕하세요~ 선생님!덕분에 GSAP을 아주 재미있게 공부하고 있습니다~다름아니라 노션에 공유되고 있는 강의 자료가 PART2는 복제가 가능하도록 설정이 되어있는데, PART1과 PART3는 복제가 불가하더라고요~혹시 복제가 가능하도록 가능하실까요?