# 30.Lottie

# 목차

1. 로티애니메이션

# 1. 로티애니메이션

html

<div id="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.4/lottie.min.js"></script>

@import url(https://qwerewqwerew.github.io/source/style/reset.css);
#lottie {
	width: 50%;
}

const animation = bodymovin.loadAnimation({
	container: document.getElementById('lottie'), // 애니메이션을 표시할 요소
	renderer: 'svg', // 렌더링 방식 (svg / canvas / html 중 선택)
	loop: true, // 애니메이션 반복 여부
	autoplay: true, // 자동 재생 여부
	path: './ani.json', // 애니메이션 파일 경로
});

const animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // 애니메이션을 표시할 요소
  renderer: 'svg', // 렌더링 방식 (svg / canvas / html 중 선택)
  loop: true, // 애니메이션 반복 여부
  autoplay: true, // 자동 재생 여부
  path: './ani.json' // 애니메이션 파일 경로
});

로티 lottie