ETC - 2021. 5. 31.

[ScrollMagic] 스크롤매직 라이브러리

안녕하세요 TriplexLab 입니다.
오늘은 스크롤매직 라이브러리 관해서 간단한 인터렉션을 만들어 봤습니다.
바로 스크롤에 반응하는 애니메에션 동작 입니다.

<section id="start">
	<div class="content">
		<img class="content_paper" src="./paper.png" alt="paper">
	</div>
</section>

#start {
	height: 100vh;
}
.content {
	width: 170px;
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(-50%, -50%);
}
.content img {width: 100%;}

.info {
	height: 100vh;
	background-color:cornflowerblue;
}
.footer {
	height: 100vh;
	background-color:yellowgreen;
}

(function(){
        const flightPath = {
            curviness: 1.25,
            autoRotate: true,
            values: [
               {x: 100, y:-20},
               {x: 300, y: 40},
               {x: 500, y: 100},
               {x: 750, y: -100},
               {x: 350, y: -50},
               {x: 600, y: 100},
               {x: 800, y: 90},
               {x: 1000, y: 0,},
               {x: window.innerWidth, y: -250},
            ]
        };

       // init controller
       const controller = new ScrollMagic.Controller();

       const tween = new TimelineLite()
        .add(
            TweenLite.to('.content_paper', 1, {
                bezier: flightPath,
                ease: Power1.easeInout
            })
       )


       const startpin = new ScrollMagic.Scene({
                triggerElement: '#start',
                duration: 4000,
                triggerHook: 0.1
            })
            .setTween(tween)
            .setPin("#start")
            .addIndicators() // 표시기 추가
            .addTo(controller)
})();

위에 코드를 파일로 제공합니다.
필요하시면 다운받아서 코드를 분석해보세요~👍 👍