gsap

프런트 엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP CDN 확인하러가기(https://greensock.com/docs/v3/Installation?checked=coreGSAP

GSAP 시작하기에서 cdn 작성하라고 했다. 작성하라고 하는 것은 애니메이션 사용할 때 작성합니다.우리는 애니메이션 스크롤하면 애니메이션 동작하도록 하기 위해서는 플러그인 작성해야합니다.

코드를 드래그해서 어떤 효과가 있는지 확인합니다.fromTo {x: 300} {y: 500} 2개 사용할 수 있습니다. 300px에서 500px으로 이동합니다.!fromTo 속성 duration 기본 속성값은 0.5 입니다.x값 0에서 10초동안 x값 500으로 이동하

그냥 드래그해서 효과만 보고 끝이라고 생각하면 안됩니다. 입문이지만 다양하게 응용해보고 검색해서 다양한 효과 알아보면서 해봅시다. stagger 요소의 간격 (각 '.box' 요소가 애니메이션을 시작할 때 사이의 0.3초)stagger 한에 옵션 추가할 수 있습니다.e

repeat 애니메이션 반복 횟수 (무한 반복 속성값 -1)repeatDelay 애니메이션 동작 후 5초 이따가 동작

스크롤트리거 사용법

.box-3 보이면 .box-2 동작markers 스크롤 시야 (그림으로 참고)start 요소의 top이 보이면 동작start의 속성 top: 요소의 위치, 100%: start의 스크롤 위치end 요소의 bottom이 보이면 동작end의 속성 bottom: 요소의 위

이미지를 준비하십시오.opacity 투명도toggleActions 'onEnter, onLeave, onEnterBack, onLeaveBack'onEnter : 시작