173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 만들었던 예제를 살펴보는 와중에 section1, section4에서 약간의 문제(?)가 발생하여 질문드립니다. section1에서 스크롤을 올려버리면 다시 스크롤을 아래로 내려도 반응이 없고 아예 먹통이 되어버립니다 section4에서는 스크롤을 아래로 내리면 먹통이 됩니다 혼자 해결해보려고 했으나 감이 오질않아서.. 어떻게 코드를 수정하면 좋을지 질문드립니다!
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님 정말 너무 궁금해서 댓글씁니다. 저는 웹퍼블리셔입니다. 요즘들어 clamp(2px, 5.333vw, 2.3rem) 등등 min max도 저런식으로 작업하는 사이트들을 종종봅니다. 계산하기가 너무 어려운데 선생님도 저렇게 작업하시는 경우가 잇나요 보통 여백및 폰트사이즈 갭 넓이 높이를 전부다 clamp, 및 min max로 작업한 사이트들이 점점 많아 지고잇어요 저는 계산법을 도저히 이해하지못해서 멘탈이 나간상태인데 요즘 추세가 저런식으로 작업을 하나요? 댓글 꼭 부탁드립니다. 이론은 알고잇습니다. clamp는 최소값 기본값 최대값 이란것도 알고있구여 선생님도 저렇게 작업을 하시나요????
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
autoAlpha : 0 이 css visibility : hidden, opacity 0 으로 설정해준다고 하고 css에 visibility hidden 을 제거해도 깜빡이는 현상은 안일어나더라구요! css에도 visibility:hidden을 작성하는 이유가 있을까요?
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
자료를 받으면 이미지랑 캡쳐본만 있는데 완성본은 없는건가요? cctv0820@naver.com 입니다.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
tl.set('#emart .pick', { opacity: 0 }) .to(map, { scale: 1, x: 0, y: 0 }) .set('#emart .pick', { opacity: 1 }) .fromTo('#emart .path', { strokeDashoffset: 496 }, { strokeDashoffset: 0 }) .to( '#emart .pick', { motionPath: { path: '#emart .path', align: '#emart .path', alignOrigin: [0.5, 0.5], }, }, '<' ); 위 코드에서 맨 처음 set 으로 opacity: 0 을 줘서 pick을 안 보이게 한 다음에 후에 다시 set으로 opacity: 1을 주게 되는데요 궁금한 것이 아직 순서상 motionPath 가 실행될 차례가 아니어서 마트 위치에서 pick 이 보여질 것인데 어째서 강남역 위치에서 부터 보여 지게 되는지 궁금합니다. 아래에 있는 set을 위로 올려서 tl.set('#emart .pick', { opacity: 0 }) .set('#emart .pick', { opacity: 1 }) .to(map, { scale: 1, x: 0, y: 0 }) 이렇게 위치를 바꾸면 그때서야 제가 이해한 형태로 움직이게 되네요. 왜 그런지 궁금합니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
해당 편 강의를 들어보면 set을 어디선가 사용한 것 같이 설명을 해주시는데 혹시 정확히 어느 파트로 가야 set 사용한걸 볼 수 있을까요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요. 수업 너무 잘 듣고 있습니다 ^^ gsap.set 은 어디에서 처음 배우는가요? 베이직 편도 다 봤는데 제가 놓친것인지.. 그리고 나중에 svg 편이 새로 출시되는 계획이 있는걸까요~?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
범샘님! 빠른 답변 및 업데이트 감사합니다, 답변해주신것처럼 section1, section4에서 스크롤문제가 발생합니다. 이 부분은 질문드리기 전에 확인한 부분이라 해결하였으나, 다만 답변해주신 두번째 경우는 제가 드린 질문의 방향과 조금 달라 재질문 드립니다. section4까지 스크롤을 내린후, 다시 section3까지 스크롤을 end-section3 지점까지 올리고, 다시 section4로 스크롤 할 경우 스크롤이 작동되지 않습니다. 이 부분은 첫번째 질문 드린 경우와 비슷한 상황인거 같은데, 이번에는 반대로 스크롤하는 경우라 direction을 down으로 하는 조건문을 추가하면 되는건지, 조금 더 명확한 답변과 코드를 확인하고 싶어 다시 질문드립니다. 여러모로 바쁘실텐데, 감사합니다!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요, 쉬운 강의 덕분에 gsap 을 쉽게 접하고 사용할 수 있어서 감사합니다. 근데 해당 부분 구현중에 범샘께서 작성하신 코드(ScrollTrigger-finished)에서 확인해보면 1) section3 도달 후, section2로 스크롤을 올리는 경우 2) section4 도달 후, section3에서 다시 section4 로 스크롤을 내리는 경우 해당 2가지 경우에서 section03을 기준으로 스크롤이 위아래로 작동을 잘 하지 않습니다. if(currentPageIndex === 3) return; 때문인 것 같은데, 스크롤을 자유롭게 올렸다 내렸다 하면서 페이지를 확인할 수 있도록 하려고 하는데 잘 안되네요. 코드를 어떤 방식으로 수정해야할지 질문 남깁니다. 감사합니다.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요! 수강을 막 시작하여 학습파일을 다운로드 했습니다. 수업에서는 강의자료 폴더명으로 '2023_인프런_포트폴리오메인' 이라는 폴더가 첨부파일로 있다고 하셨는데, 다운받아보니 '학생첨부용_수강학습파일' 폴더 밖에 없어서 문의드립니다. 참고할 수 있도록 학습본 말고 완성된 전체본도 받아볼 수 있을까요?
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 선생님~ 다름이 아니라 강의 파일 내에 " https://source.unsplash.com/random... " 이런 주소를 가진 이미지들이 모두 엑박으로 떠서 글 남깁니다! 확인 부탁드립니다!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
어제 이어 질문드리네요..ㅎㅎ 찾아봤더니 잘 안나오기도 하고 머리썻는데 안되서 다시질문드려요 ㅠ 인터넷보면 물 흐르듯 무한으로 보여지는 배너들효과를 구현하려고하는데 A div실행 이후 B가 실행하고 이걸 무한으로 돌려야겠다! 싶었습니다. 제가 계산을 잘못한것인지 계속 상이하게 됩니다. ㅠ 목표 예시) framer 로 구현 위와 같은 효과를 GSAP로도 주고 싶었는데 가능할까요? 트라이 계쏙해보는데 안되네용 ㅠ 제 생각은 무한루프 돌리는 상태의 div를 감싼 부모를 css 키프레임줘서 빠르게 들어온 이후 무한으로 루프돌릴계획입니다! useGSAP( () => { const Perents = ref.current?.offsetHeight; if (Perents) { gsap.set(".boxes-clone", { y: `-=${Perents}` }); gsap.fromTo( ".boxes", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, } ); gsap.fromTo( ".boxes-clone", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, delay: 3, } ); } }, { scope: ".wrapper" } );
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
안녕하세요! 초기 애니메이션을 진입할때 css나 gsap으로 keyfream 주고 빠르게 들어온 이후 감속하듯이 부드럽게 흐르도록 구현 할 수 있을까요..? css에 같은 클래스에 키프레임을 줬더니 css때문에 gsap이 충돌나는지 안되더라구요.ㅠ.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
안녕하세요 강의 너무너무 잘 듣고 있습니다. 아무 지식도 없이 쓰려니까 너무 막막했는데 강의 감사합니다 ! 섹션 14를 만들었는데 cloneWrap에 border-radius를 주니까 테두리 밖 색상이 계속 바뀌면서 보이네요 이 부분을 제거하고 싶어서요:) 혹시 가능한 방법이 있을까요 ? 답변 주시면 감사하겠습니다~!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 범쌤! 강의 너무 재밌게 잘 듣고 있습니다. 선생님의 강의를 들으면서 사이드 프로젝트에 바로바로 적용해보려고 시도중인데요. 레퍼런스 사이트를 찾아보면서 구현하고 싶은 UI가 있는데 도저히 감이 잡히질 않아 문의드립니다..! https://www.studio-particle.com/ 위 링크의 해당 영역 부채꼴 UI는 어떤 방식으로 그린걸까요.. ㅠㅠ ? (제 개인적인 생각으로는 자식요소들을 부채꼴로 위치를 지정하고 부모요소를 스크롤에 따라 rotate 시키는 방법이 효과적이지 않을까? 하는 생각을 해보았습니다.) 여러방면으로 검색하고 찾아봐도 답이 나오질 않아 문의드려봅니다..! 항상 강의 잘 듣고 있습니다. 친절하고 세심한 강의 감사합니다!
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 ! 강의를 듣다가 궁금한점이 생겨 글을 남깁니다. switch (id) { case 'home': console.log('home'); progress = 0; break; case 'mountain': console.log('mountain'); progress = 0.21; break; case 'river': console.log('river'); progress = 0.47; break; case 'company': console.log('company'); progress = 1; break; } gsap.to(route_animmation, { progress: progress, duration: 1 }); 위의 코드에서, progress: progress 변수로 사용중에다가, progress를 switch 문에서 직접 치수를 넣어주고 있는데, 클릭시 해당 svg path의 진행률을 직접 가져올 수는 없는걸까요 ? 반응형 코드에서 문제를 어떤식으로 해결하시는지 궁금합니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
웹 애니메이션을 위한 GSAP 가이드 Part.02에 advence-start > 01.animation-control > pratice의 html을 실행하면 강의랑 다르게 파란색 길이 안나와서 당황했는데 강의를 들으면서 확인해보니까 해당 밑에꺼 3개 주석처리 하니까 시작 할 때랑 똑같이 나옵니다. 혹시 연습으로 먼저 해보실분들은 이거 3개 주석처리 하시고 시작하시면 될것같습니다. #emart .path { stroke-dasharray: 496; stroke-dashoffset: 496; } #medi .path { stroke-dasharray: 604; stroke-dashoffset: 604; } .pick { opacity: 0; }
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
Deep Dive섹션 공부할 차례인데, 쌤이 설명해주시는 강의에서의 수업폴더와 제가 다운받은 폴더(파일)이 다릅니다. 제가 다운받은 자료입니다. 전체 다운받아 압축푼 상태인데, deep dive 폴더안에는 이게 전부입니다. 확인 부탁드립니다.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님 안녕하세요 헤더 영역 스크롤 방향 이벤트 동적 구현이 되지 않아 문의 드립니다 해당 파일 알집으로 압축하여 보냈는데 하기 내용처럼 뜨면서 보내지지가 않습니다.... 확인 부탁드립니다 감사합니다. 파일 첨부 실패 첨부할 수 없는 파일과 사유는 아래와 같습니다. 첨부파일 목록파일명사유 헤더스크롤이벤트.Zip 관리자가 제한한 파일 형식
