묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
duration과 stagger
안녕하세요 선생님! 수업 즐겁게 잘 듣고 있습니다!문득 duration과 stagger 사이의 궁금증이 생겨 문의드립니다. 제가 이해한 바로는duration = 애니메이션 진행시간의 총량stagger = 애니메이션 진행시 아이템간의 간격이렇게 이해하고 있습니다.그런데 만약 duration 1초,stagger 0.5초,item * 8(item) 0.5 (item) 0.5 (item) 0.5 (item) 0.5 ...duration이 설정한 1초를 아득히 넘어가게 되는데GSDevTools로 확인해보니 stagger로 인해 초과되는 시간만큼 늘어나는 것으로 확인이 됩니다.그렇다면 duration보다 stagger의 총합 길이가 더 우선이 되니 stagger의 총합 길이가 초과할 시 duration은 필요 없겠다라고 생각이 들었습니다.그런데 GSDevTools로 확인해본 결과 duration 1초 적용시 4.5초 / 미적용시 4초 라는 결과값을 확인했습니다. 어떤 상관이 있는지 궁금하여 질문 남깁니다..!
-
미해결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.02
이미지 관련 사이트 문의드립니다.
안녕하세요~! gsap part2 수강생입니다.토이스토리 처럼 타임라인 방식으로 다른 이미지를 활용해서 새로 만들어보고싶은데요.무료 다운가능한 이미지 사이트가 있을까요? 있다면 공유 부탁드릴게요.ㅠ
-
해결됨웹 애니메이션을 위한 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 가이드 Part.02
노션 링크는 어디에 있는지 문의 드립니다~
노션 링크는 어디에 있는지 문의 드립니다~
-
미해결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가 작동되지 않는다는 알림만 뜰 뿐 해결책을 찾지는 못했습니다. 이러한 경우에 어떻게 해결할 수 있을까요? 미리 답변 감사드립니다.
