묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
애니메이션 재생헤드를 처음으로...
안녕하세요 선생님 1.어제 질문드린 내용(forEach로 다중 요소에 중복 이벤트 걸기)은 마지막에 말씀해주신'gsap.to(item,{rotation:”+=360”}) 으로 작성해보세요 ' 코드로 해결을 하였습니다. 감사합니다.그런데 그전에'그럴경우 애니메이션이 종료 후 애니메이션의 재생헤드를 처음으로 돌려놓는 코드를 작성해 주시거나' 라고 말씀해주셨는데... 이게 어떻게 하는건지 도저히 모르겠어요..ㅜㅜㅜ예시코드를 시간되실때 한번 보여주셨음 해요..(아직 많이 부족합니다..이해 부탁드려요..ㅜㅜ)시간되실 때 천천히 해주셔도 됩니다.항상 똑부러지는 강의 잘 듣고 있습니다.감사합니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
timeline를 호출한 함수를 변수에 할당할때, const/let 둘 중에 어떤 것으로 해야 하나요?
let tl = gsap.timeline(); tl.to(".dash",{opacity:1, backgroundColor:'yellow'})안녕하세요!강의를 듣다가, 궁금함이 생겨 문의 드립니다, #질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?#질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?#질문1. 애니메이션을 변수에 할당 할때, 변수의 let/cost 둘중에 어떤 것으로 정의해야 할까요?변수 tl과 같이, timeline()을 호출한 함수를 변수에 정의 할 때, let으로 해야 할지, const로 해야 할지궁금함합니다.const tl = gsap.timeline()let tl = gsap.timeline()함수를 할당하는 변수에 주로 const 변수에 담아 사용해와서,강좌에서는 let으로 정의해주신 부분에 의미가 있을까,궁금함이 생겼습니다!GSAP도 JS다 보니,사용자가 실수로 이미 정의한 tl 변수에 다른 애니메이션도 추가할 수 있는 위험이 있고 그럴까요??강의 초반부에 gsap에 다른 값을 할당하면 안된다는 부분과 어떤 연관성이 있는걸까요?GSAP도 JS 라이브러리 다보니, 변수 정의하는 것도 let과 const로 각각 정의할 때 차이점이 있지 않을까 해서 문의 드렸습니다! #질문2. GSAP에서는 애니메니션01, 애니메이션02, 와 같이 각각 애니메이션을 정의하고, 이것을 각각에 변수에 할당해 변수를 사용하는 컨셉인가요?GSAP 파트3을 수강하기 위해, 열심히 정주행중입니다!감사합니다!
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
forEach안에서 gsap을 사용할 때 이벤트가 한번밖에 안걸리는 문제
const box=gsap.utils.toArray('.box'); box.forEach(function(item){ item.addEventListener('click',function(){ gsap.to(item,{ rotationY:360, duration:1, ease:'none' }) }) }) 안녕하세요 강의 잘 보고있습니당공부하다가 질문이 생겨 문의드려요..gsap을 forEach안에서 사용해서 애니메이션을 줄려고합니다.위처럼 코드를 적으면 동작은 잘되는데 클릭이 한번밖에는 안되네요..이 문제를 해결할 수 있을까요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
안녕하세요 강사님
이번에 업데이트 해주신 gsap 수업자료에 json 파일은 vscode를 사용해야지만 확인이 가능한건가요?이전 영상과는 수업자료가 조금 다른거같아 질문드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
gsap.set() vs gsap.default()
gsap.set(), gsap.default() 두 가지 모두트윈의 값을 미리 셋팅하는 역할을 하는데 어떤 상황에서 어떤 것을 사용해야할지 감이 잡히지 않습니다.
-
해결됨GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
영상 오류 확인 요청 드립니다.
섹션 14 5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브)ScrollTrigger 실무활용_ScrollTrigger Script적용영상 오류 확인 요청 드립니다.4분 37초 정도 부터 30분 50초 정도 까지 블랙 화면(소리 X)으로 나옵니다.확인 후 회신 부탁 드립니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
Y축 섹션 고정스크롤애니메이션 강의중
Y축 섹션 고정스크롤애니메이션 강의에서 스크롤을 올리면 border-radius준 영역 밖으로 bg가 보이는데 어떻게 없애면 될까요??
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
제이쿼리 플로그인을 쓰나요?
강의듣고 자바스크립트로 코드 변경해보고싶은데... 질문글에 있는글을 보니 제이쿼리뿐아니라 제이쿼리를 사용한 플로그인을 사용한다고 되어있던데 제이쿼리를 사용한 플로그인을 사용하나요?...제이쿼리를 사용한 플로그인은 따로 자바스크립트로 교체가 안되는건가요?
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
이 코드를 모르겠어요
이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요.content: attr(data-char);*혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
강의 보던중 사용중인 툴이 궁금해서 여쭤봅니다.
강의를 보던중 강사님께서 callback 이라는 뜻을 찾기위해 특정 위젯 같은 것을 실행 후 검색어 입력 후 파파고로 실행 하시던데.혹시 이 툴이 뭔지 알수 있을까요?윈도우 사용자 입니다.
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
섹션10에 자료파일이 안보여요.
섹션10 스크롤에 반응하는 이미지와 텍스트 애니메이션 제작에 자료파일이 안보여요.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
gsap 상업적 사용여부
Club GreenSock을 제외하면 상업적으로 무료로 사용가능한건가요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
fork 주소가 어떻게 되나요?
강의노트 주소는 어디에 있나요 아무리 찾아봐도 없네요
-
미해결당신의 창의적인 웹을 만들어보세요: Parallax ScrollTrigger 마스터 클래스
예제 애니메이션 세로 스크롤 적용
안녕하세요! 강의는 이미 샀는데 궁금한게 생겨서 여기에 문의드립니다. 현재 예제 애니메이션에서는 세로 스크롤 스무스가 적용이 안되어 있는걸로 확인이 되는데요!혹시 적용이 안된 이유가 있을까요?
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 수업자료를 다운받았는데 중간중간 파일이 없어요 ㅠㅠ
영상 우측상단에 수업자료를 다운받고 열어보니 중간중간 없는 파일들이 있습니다 ㅠㅠ 저만 그런건지..
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요 이렇게 나오는데..
오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요
-
미해결GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
짤려서 나오는 이유를 모르겠어요
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; }
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
강사님 다중요소제어 stagger 질문있습니다
vs코드에서 코드를 치면서 보는중인데 새로고침하면 첫번째 요소가 이미 위로 올라간상태로 시작되어서 어색한데 이 부분은 어떻게 해결 가능할까요? duration을 좀 줘보고 해봐도 첫번째 박스는 위로 좀 올라간상태에서 시작하네요 delay: 0.6 정도주면 대충 맞긴한대 delay 주는 방법밖에는 없겠죠? gsap.to(".stage .box", { y: -50, stagger: 0.2, });
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.01
노션 주소 좀 확인해주세요. 잘못되어 있는 것 같아요. 아무것도 클릭이 안됩니다.
https://productive-printer-b81.notion.site/GSAP-Basic-4c37387fe8254db4a7d14c883f8baa2d노션 주소가 이거 맞나요? 환경설정 파트 > 수업 자료 라고 되어 있는 거 클릭하면 이런 주소가 나옵니다. ..제대로 된 주소 찾느라고 다섯개 강의를 다 다시 봤는데... 흠...진도를 나갈 수가 없어요. ㅠ.ㅠ확인부탁드립니다.
-
해결됨웹 애니메이션을 위한 GSAP 가이드 Part.02
이후에 출시될 강의엔 유료 플러그인이 사용되나요?
Q. 현재 준비중이시거나 계획으로, 이후에 출시될 강의들에 유료 플러그인이나 툴이 포함될까요?궁금해서 질문해봅니다! 🤔