TweenMax (1)

1. HTML상에서 작업 전 추가 (CDN 설치)

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

 

2. TweenMax 

[ TweenMax.to() 와 TweenMax.from() 차이점 ] 

 

 

---

1) TweenMax.to()

<style>
      .box { width: 100px; height: 100px; background: #8c98f3; opacity: 0; }
<style>

<div class="box"></div>

// TweenMax.to( 대상오브젝트, 시간(seconds), 속성-목표값 )
TweenMax.to( '.box', 5, { opacity: 1 } ); // .box opacity값이 0일 때, 초기값

 

형식) TweenMax.to( 대상오브젝트, 애니메이션 실행 시간(seconds), 속성-목표값 );

box 클래스의 opacity값이 0일 때

box 클래스를 대상 오브젝트로 가져오고, 애니메이션을 5초 동안 opacity 값을 1로 변경한다

---

2) TweenMax.from()

<style>
      .box { width: 100px; height: 100px; background: #8c98f3; opacity: 1; }
<style>

<div class="box"></div>

// TweenMax.from( 대상오브젝트, 시간(seconds), 속성-초기값 )
TweenMax.from( '.box', 5, { opacity: 0 } ) // .box opacity값이 1일 때, 목표값

형식) TweenMax.from( 대상오브젝트, 에니메이션 실행 시간(seconds), 속성-초기값 );

예시) TweenMax.from( '.box', 5, { opacity: 0 } );

box 클래스의 opacity값이 1일 때

box 클래스를 대상 오브젝트로 가져오고, 초기값{ opacity: 0} 에서 애니메이션을 5초 동안 opacity 값을 1로 변경한다

---

3) TweenMax.set()

TweenMax.set( '.box', { scale:0.5, opacity:0, x:0 } );

형식) TweenMax.set( 대상오브젝트, 속성 객체 );

예시) TweenMax.set('.box', {scale: 0.5, opacity:0, x:0 }); 

대상오브젝트(예시에선 box 클래스)에 즉시 속성을 적용한다.

위 예시는 크기를 반으로 변경 하고 보이지 않게 적용

---