Lottie.js, scroll 연동

 

사용법 : https://airbnb.io/lottie/#/

---

1. 에프터이펙트에서 제작한 애니를 json으로 변환한다. 
bodymovin 플러그인이 파일을 인식 못하고 작동이 안되어 찾아봤더니
lottieFiles 가 생기면서 이제는 lottieFiles 플러그인으로 대체되었다고 한다. 

https://lottiefiles.com/kr/

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

 

---

<script src="js/lottie.min.js" type="text/javascript"></script>

<div id="bodymovin" class="animation"></div>

기본 작동법

let clickAni = document.querySelectorAll('.ani-click');
let loopAni = document.querySelectorAll('.ani-loop');
let hoverAni = document.querySelectorAll('.ani-hover');
let reverseAni = document.querySelectorAll('.ani-reverse');
let slowAni = document.querySelectorAll('.ani-slow');

// 클릭시 재생
Array.prototype.forEach.call(clickAni, icon => {
	var anim = bodymovin.loadAnimation({
		container: icon,
		path: `json/${icon.dataset.file}.json`,
		renderer: 'svg',
		loop: false,
		autoplay: false
	})
	icon.addEventListener('click', () => {
		anim.setDirection(1);
		anim.play();
	})
})

// loop 
Array.prototype.forEach.call(loopAni, icon => {
	var anim = bodymovin.loadAnimation({
		container: icon,
		path: `json/${icon.dataset.file}.json`,
		renderer: 'svg',
		loop: true,
		autoplay: true
	})
})

// 마우스 오버시 재생
Array.prototype.forEach.call(hoverAni, icon => {
	var anim = bodymovin.loadAnimation({
		container: icon,
		path: `json/${icon.dataset.file}.json`,
		renderer: 'svg',
		loop: false,
		autoplay: false
	})
	icon.addEventListener('mouseenter', () => {
		anim.setDirection(1);
		anim.play();
	})
	icon.addEventListener('mouseleave', () => {
		anim.setDirection(-1);
		anim.play();
	})
})

// 마우스 오버시 반대로 재생
Array.prototype.forEach.call(reverseAni, icon => {
	var anim = bodymovin.loadAnimation({
		container: icon,
		path: `json/${icon.dataset.file}.json`,
		renderer: 'svg',
		loop: false,
		autoplay: true
	})
	icon.addEventListener('mouseenter', () => {
		anim.setDirection(-1);
		anim.play();
	})
	icon.addEventListener('mouseleave', () => {
		anim.setDirection(1);
		anim.play();
	})
})


// 스피드조절
Array.prototype.forEach.call(slowAni, icon => {
	var anim = bodymovin.loadAnimation({
		container: icon,
		path: `json/${icon.dataset.file}.json`,
		renderer: 'svg',
		loop: true,
		autoplay: true
	})
	icon.addEventListener('mouseenter', () => {
		anim.setSpeed(0.2);
	})
	icon.addEventListener('mouseleave', () => {
		anim.setSpeed(1);
	})
})

---

글씨쓰는 애니 json 가져와서 스크롤 연동 

var anim;
var elem = document.getElementById('bodymovin');
var animData = {
    container: elem,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    rendererSettings: {
        progressiveLoad:false
    },
    path: '../data/123.json'
};
anim = bodymovin.loadAnimation(animData);

function lottieScroll(){
   
    var scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100; //높이 백분율
    scrollPercentRounded = Math.round(scrollPercent); // % 반올림
    anim.goToAndStop( (scrollPercentRounded / 100) * anim.totalFrames, true);
}

$(window).scroll(function(){
    lottieScroll();
})