[2015.11.24] GSAP 활용한 Timeline Slider

IOS 의 슬라이더 효과를 구현해 놓았네요.

오늘은 GSAP을 이용하여 구현한 것에 초점을 두고 소개해드립니다.

우선 GSAP(GreenSock Animation Platform) 이라함은.. 이름에서 볼 수 있듯이

에니메이션에 대한 처리를 하는 플랫폼 입니다.

에니메이션이야 Transit, jQuery, Velocity 등 사용할 수 있는 방법은 많지만..

GSAP이 내세우는 가장 큰 특징이 미친듯이 빠른 속도랍니다.

속도테스트 비교페이지(https://greensock.com/js/speed.html)에서 테스트 해 본 결과는 

jQuery : 17.3 fps

GSAP : 25.3 fps

jQuery with gsap.js plugin : 20.6 fps

Zepto(CSS) : 16.9 fps

GSAP 이 월등히 부드럽게 출력해주는걸 알 수 있는데요.

희한하게 GSAP 과 Velocity 를 수치로 딱 비교해 놓은 건 찾기 힘들더군요.. 

돌아가는 성능 보면 둘이 비슷해서 내가 더 월등히 낫다라고 우길수 없어서 그런가..ㅋ

헌데 GSAP은 플랫폼이고 Velocity는 jQuery plugin이어서 GSAP이 훨씬 풍부한 기능을 제공해 준답니다.

GSAP과 Veolocity 기능비교 -> http://popmotion.io/guides/feature-comparison

GSAP과 Veolocity 속도비교 -> http://codepen.io/GreenSock/full/pmknI

얼마나 멋진 녀석인지는 여기 예제들에서 확인해 보세요 -> http://greensock.com/examples-showcases

GSAP 사용 스크립트

TweenLite.set('body',{perspective:700});
var slides=document.querySelectorAll('.slide'),tl=new TimelineLite({paused:true});
for(var i=0;i<slides.length;i++){
    var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i;
    D.addEventListener('click',function(){ tl.seek(this.id).pause() });
    document.getElementById('Dots').appendChild(D);
    if(i!=0){tl.addPause('Dot'+i)};
    if(i!=slides.length-1){
      tl.to(slides[i],0.5,{scale:.8,ease:Back.easeOut})
        .to(slides[i],0.7,{xPercent:-100,rotationY:80},'L'+i) 
        .from(slides[i+1],0.7,{xPercent:100,rotationY:-80},'L'+i)
        .to('#Dot'+i,0.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i)
        .from(slides[i+1],0.5,{scale:.8,ease:Back.easeIn})
    };
};
function GO(e){
  var SD=isNaN(e)?e.wheelDelta||-e.detail:e;
  if(SD<0){tl.play()}else{tl.reverse()};
};
document.addEventListener("mousewheel",GO);
document.addEventListener("DOMMouseScroll",GO);
document.getElementById('nextBtn').addEventListener("click",function(){GO(-1)});
document.getElementById('prevtBtn').addEventListener("click",function(){GO(1)});

​

간단한 사용 예제 및 Demo

See the Pen Full-Screen Slider ( GSAP Timeline ) #1 by Diaco-ML (@MAW) on CodePen.