전체 글32 [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(실전3) [★] 플러그인 1. Pin과 timeline으로 요소 등장 [Html] 더보기 section1 section2 1 2 3 section3 section4 [Css] 더보기 * { margin: 0; padding: 0; } body { margin: 0; } section { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; } section p { font-size: 40px; margin-bottom: 50px; } #section1 { background: yellowgreen; } #section2 { back.. 2024. 3. 23. [GSAP] ScrollTrigger 중급(실전3) [★] 플러그인 # 문제점 애니메이션이 뷰포트 중간에서 시작하고 화면을 벗어나면 초기화하고 싶습니다. - GSAP는 스크롤트리거의 시작 지점(scroller-start)과 요소의 시작 지점(start)이 만나는 순간 애니메이션이 실행된다. 그리고 애니메이션을 초기화하고 싶을 때 toggleActions을 사용해 요소 위로 스크롤하면 초기화하도록 할 수 있다. 기본적으로 스크롤트리거의 시작 지점은 화면 최하단이라서 문제 되지 않지만 시작 지점을 중간에 둘 경우 toggleActions을 쓰면 아래와 같은 문제가 발생한다. 요소가 아직 화면에 보이는데도 즉시 원상태로 돌아가 버린다. 이 문제는 scrub: true 로도 해결할 수 없다. # 해결방안 해결 방법은 스크롤트리거를 두 번 사용해야 한다. 하나는 .. 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. 이전 1 2 3 4 5 6 다음
