FRONT/GSAP6 [GSAP] ScrollSmooth 효과 1. CDN 링크 https://gsap.com/docs/v3/Plugins/ Plugins | GSAP | Docs & Learning --- gsap.com [★] 플러그인 2024. 3. 23. [GSAP] TextPlugin 타이핑 효과 [★] 플러그인 1. TextPlugin 정의 - 타이핑 효과1 [Html] 더보기 GreenSock's TextPlugin Set or animate text in sequence. Reversible too! [Css] 더보기 * { margin: 0; padding: 0; } body { background-color:#1d1d1d; font-family: "Signika Negative", sans-serif; color: #999; margin: 0; font-size: 18px;} h1, h2 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color: #f3f2ef; font-weight: 400;} h1 { fon.. 2024. 3. 23. [GSAP] ScrollTrigger 숫자 카운팅 [★] 플러그인 1. 해당 요소에 스크롤시 숫자 카운트 [Html] 더보기 0 [Css] 더보기 * { margin: 0; padding: 0; } .blank { height: 3000px; background-color:grey; } .number_wrapper { background-color:grey; text-align:center; min-height: 1000px;} #number { font-size:25vw; font-family:sans-serif; font-weight:600; color: #444444; } [Script] 더보기 gsap.registerPlugin(ScrollTrigger); var startCount = {count: 0}; gsap.to(startCount, {.. 2024. 3. 23. [GSAP] ScrollTrigger 중급(실전2) 1. 유튜브 링크 유튜브 무료강의 https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s [★] 플러그인 2. 용어 정의 - 토글액션 (toggleActions) 더보기 gsap.registerPlugin(ScrollTrigger); gsap.to(".box2", { scrollTrigger: { trigger: ".box2", // toggleActions: "none none restart reverse" }, x: 400, duration: 2, }) ScrollTrigger.create({ onEnter: ONENTER, onLeave: ONLEAVE, onEnterBack: ONENTERBACK, onLeaveBack: ONLEAVEBACK }); BODY = d.. 2024. 3. 23. [GSAP] ScrollTrigger 중급(실전1) 1. 유튜브 링크 유튜브 무료강의 https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s [★] 플러그인 2. gsap 정의 gsap.timeline => 시간에 배치하는 트윈용 컨테이너로 타임라인 재생 헤드가 이동함에 따라 하위 트윈을 스크럽하고 그에 따라 렌더링 gsap.to(".circle", { x: 40, fill: 'blue' }); => 현재 상태에서 정의된 값으로 애니메이션 적용 gsap.from(".circle", { x: -40, fill: 'blue' }); =>정의된 값에서 애니메이션을 시작해서 현재상태에 끝나는 역방향 gsap.fromTo(".circle", { x: -40, fill: 'blue' }, { x: 40, fill: 'green' }).. 2024. 3. 22. [GSAP] ScrollTrigger 기초문법 1. 유튜브 링크 유튜브 무료강의 https://www.youtube.com/watch?v=xn6rwG-DinA&t=3s [★] 플러그인 2. gsap 정의 gsap.timeline => 시간에 배치하는 트윈용 컨테이너로 타임라인 재생 헤드가 이동함에 따라 하위 트윈을 스크럽하고 그에 따라 렌더링 gsap.to(".circle", { x: 40, fill: 'blue' }); => 현재 상태에서 정의된 값으로 애니메이션 적용 gsap.from(".circle", { x: -40, fill: 'blue' }); =>정의된 값에서 애니메이션을 시작해서 현재상태에 끝나는 역방향 gsap.fromTo(".circle", { x: -40, fill: 'blue' }, { x: 40, fill: 'green' }).. 2024. 3. 22. 이전 1 다음
