Lottie Web

Render After Effects animations natively on Web, Android, and iOS, and React Native.

Lottie Documentation
Javascript
<script src="vendors/lottie/lottie.min.js"></script>
Example

You can update colors, animation duration, and other stuff from this excellent editor.

Lottie Editor
<div class="row align-items-center">
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/check-primary-light.json"}'></div>
  </div>
  <div class="col-lg-4 mt-5 mt-lg-0">
    <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/warning-light.json"}'></div>
  </div>
  <div class="col-lg-4">
    <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/heart.json"}'></div>
  </div>
</div>
Loading Animation Example
Get More Animations
<div class="row align-items-center">
   <div class="col-lg-4">
     <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/infinite-loop.json"}'></div>
   </div>
   <div class="col-lg-4 mt-5 mt-lg-0">
     <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/loading-square.json"}'></div>
   </div>
   <div class="col-lg-4">
     <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/loading.json"}'></div>
   </div>
 </div>
Featured Animation Example
Get More Animations
<div class="row align-items-center">
   <div class="col-lg-4">
     <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/shopping-list.json"}'></div>
   </div>
   <div class="col-lg-4 mt-5 mt-lg-0">
     <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/sleeping-404.json"}'></div>
   </div>
   <div class="col-lg-4">
     <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/star-feedback.json"}'></div>
   </div>
 </div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.0.0-beta5

customize