Working with Lottie json animations in EE
How Do I?
Anyone got any experience adding Lottie animations to templates? Seems to be some kind of SVG style format.
Have been given a “lottie json” file by designer expecting it to work as a click-animation … but so far looks like playing the animation will require using some kind of custom JS player. Wondering if I can get a leg-up on this from someone who has done it before …
TIA for any guidance / help / ideas.
Note- this was a great community thread with multiple folks chiming in on how they’ve used Lottie in EE. A newer player (https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-wc/) was mentioned, as was Figma. “Figma, but they have a really nice Lottie plugin that makes all of this super easy”, as well as example sites using Lottie.
Interested in learning more solutions or want to get to know other EE users? Read more about joining the slack here! Join Our Slack!
If you link to the player script and use the player code to link to the lottie animation json file it should play…
script src=”https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js”
<lottie-player src=”Comp_1.json” background=”transparent” speed=”1” [removed] loop autoplay></lottie-player>
For anyone new to animated SVGs, Figma has a Lottie plugin that makes the creation and embed process very easy.
https://lottiefiles.com/plugins/figma