Lotties with Rails 6 and Webpacker

lotties_rails_6_webpacker.md

1. Install Lottie Player:

npm install --save @lottiefiles/lottie-player

2. Require it at app/javascript/packs/application.js

require('@lottiefiles/lottie-player');

3. Set webpacker to load jsons

static_asset_extensions:
  - .json

extensions:
  - .json

4. Put your lotties jsons wherever you want (e.g. app/javascript/images/lotties

5. Render lottie-player tag in your html:

#my-lottie-container
  %lottie-player{ autoplay: true, loop: true, src: asset_pack_path('media/images.lotties/mylottie.json') }

6. Profit

Extra:

• Create a view helper to handle your lotties paths:

def lottie_pack_path(name)
  asset_pack_path "media/images/lotties/#{name}"
end