[GSAP] 개념/메서드 정리

 GASP :

스크립트 애니메이션을 위한 도구 모음

 

 

설치

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

 

 

기본문법

gsap.to()

타겟 엘리먼트의 끝 값을 지정하는기본 메서드(시작 후 종료되는 값을 지정)

 

애니메이션을 제작하기 위해 2가지 요소가 필요하다.

- targets : 객체, 객체의 배열, .class

- vars : 속성 ex) duration: 1, opacity: 0, stagger: 0.05

gsap.to(".test", {opacity:0, xPercent: 100, stagger: 0.05})

 

 

gsap.from()

to() 메서드와 반대로 시작점을 지정할 수 있다.

*opacity : 0으로 설정하여 글자가 안 보여지는 상태 -> 보여지도록 효과

gsap.from(text.chars, {
        scrollTrigger: {
            trigger: "#section_01 .text_box",
            start: 'top 70%',
            end: 'top top',
            scrub: false,
            /* markers: true, */
            toggleActions: 'play play reverse reverse'
        },
        //*모션효과
        opacity: 0,
        stagger: 0.08,
        duration: 0.5,
    }

 

 

gsap.fromTo()

타겟 엘리먼트의 시작과 끝을 함께 지정해주는 메서드

*이미지 안보여지는 상태 -> 0.5초 동안 점차 보여지도록(power04.out)한다. 

.fromTo(".wrap .main_img", { opacity: 0 }, {opacity: 1, ease: "power04.out", duration: 0.5});

 

 

gsap.set()

타겟 엘리먼트의 즉시 설정, 초기값 설정 (set 초기값 먼저 지정 후 to메서드 사용)

*아이콘 초기 위치값 설정 -> 트리거발생시 지정 위치로 이동

.set(".wrap .man_icon:nth-of-type(1)", { left: "50%", top: "38%" })
.set(".wrap .man_icon:nth-of-type(2)", { right: "35%", top: "20%" })
.set(".wrap .man_icon:nth-of-type(3)", { right: "25%", top: "30%" })
(...)
.to(".wrap .man_icon:nth-of-type(1)", { left: "20%", top: "20%" })
.to(".wrap .man_icon:nth-of-type(2)", { right: "20%", top: "0%" })
.to(".wrap .man_icon:nth-of-type(3)", { right: "10%", top: "20%" })

 

 

gsap.timeline()

애니메이션 그룹을 전체적으로 제어, 모드 모듈화, 콜백문법 사용가능

 

단축코드

*top, left 대신 x 와 y (transform)를 사용하는것이 좋습니다.

*속성표기법 : cameCase ex) fontSize, backgroundColor

GSAP	CSS
x : 100	transform : translateX (100px)
y : 100	transform : translateY (100px)
rotation : 360	transform : rotate(360deg)
rotationX : 360	transform : rotateX(360deg)
rotationY : 360	transform : rotateY(360deg)
skewX : 45	transform : skewX (45deg)
scale : 2	transform : scale (2, 2)
xPercent : -50	transform : translateX(-50%)
yPercent : -50	transform : translateY(-50%)

 

 

 

 

 

 

---

플러그인

Split-Tpye

텍스트를 개별 글자, 단어, 줄 단위로 쉽게 분리하여 애니메이션 효과 등을 적용할 수 있게 해주는 JavaScript 플러그인

<!-- Minified UMD bundle -->
<script src="https://unpkg.com/split-type"></script>

 

*작업소스

<section id="section_02">
	<h2 class="my_Type">글자들이 서서히 내려옵니다.</h2>
	<p class="me_Type">글자들이 서서히 올라옵니다.</p>
</section>
        
const myType = document.querySelectorAll(".my_Type");

          myType.forEach((char, e) => {
            const text = new SplitType(char, {type: "chars"}); // 글자 쪼개기

            gsap.fromTo(text.chars, {
                y:-100,
            },{
                y:0,
                duration:0.5,
                stagger:0.05,
                scrollTrigger:{
                    trigger: char,
                    start:"top 60%",
                    end: "top 20%",
                    markers:true,
                    scrub:false,
                    toggleActions: "play play reverse reverse",
                }
            })
          });

 

[CSS] Clip-Path 

대상이 되는 엘리먼트에 사용하여 circle, ellipsis, polygon(다각형) 등의 원하는 영역만 가위로 자른 것처럼 보여줄 수 있습니다. 

clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

 

---

 

MorphSVGPlugin: 복잡한 SVG Paths를 부드럽게 모핑

DrawSVGPlugin: SVG Strokes의 길이와 위치를 애니메이션

MotionPathPlugin: Path를 따라 모든 요소에 애니메이션을 적용