TWEENMAX

greensock 에서 만든 라이브러리

https://greensock.com

https://cdnjs.com/libraries/gsap

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

*border-radius같은 특수문자의 경우 제거하고 camelCase로 표기

 

TweenMax.to(target, duration, {vars});

트윈맥스 값을 최종 지점에 보여준다.

 

TweenMax.from()

시작 지점에서 값을 보여준다.

 

.fromTo()

 from에 지정된 값 -> to에 지정된 값으로 보여준다.

 

.staggerFrom()

target(대상)이 배열 속성으로,

시작 시간을 지정된 시간만큼 엇갈리게 작동하게 하여

균일하게  띄우는 시퀀스를 만드는 파라미터.

 

 

.TimelineMax

ani1 끝난후 ani2, ani2 끝난후 ani3 … 식의 타임라인 제작 가능

.panel{

transform: scaleY(0)

}

#light{

   opacity:0;

 

}

 

<script>

document.getElementById('cta').addEventLitener('click',function(){

           TweenMax.to('.panel', 1.5, {scaleY: 1, height:'100vh', ease: Circ.easeout});

           TweenMAx.to('#light',  ,{opacity:1, y:0, delay:1, ease:Back.easeOut.config(1.7)});

 

}

</scirpt>

 

easing에 관한 속성

https://greensock.com/docs/v3/Eases