@noxfed/lottie-webpack-loader

Webpack Loader for json lottie-web files

Usage no npm install needed!

<script type="module">
  import noxfedLottieWebpackLoader from 'https://cdn.skypack.dev/@noxfed/lottie-webpack-loader';
</script>

README

Load assets for json lottie-web files

Usage

npm install @noxfed/lottie-webpack-loader --save-dev

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        type: 'javascript/auto',
        test: /\.json$/,
        include: /(lottie)/,
        loader: 'lottie-web-webpack-loader',
      }
    ]
  }
}

animation.js

import lottie from 'lottie-web';
import animationData from '@/assets/lottie/hero/index.json';

const heroAnimation = lottie.loadAnimation({
  container: document.getElementById('hero-animation'),
  renderer: 'svg',
  animationData
});

heroAnimation.goToAndPlay(0, true);

License

MIT