Lottie animations as a web component

5 years ago from William Riley, Principal Engineer at Split Infinities

Heya! Today I made something I think people here may enjoy - a web component for rendering Lottie animations. It's supposed to feel like writing the html tag.

<lottie-animation src="https://raw.githubusercontent.com/splitinfinities/lottie-wc/master/src/assets/lottie_logo.json" autoplay loop controls></lottie-animation> <script src='https://unpkg.com/lottie-wc/dist/lottie.js'></script>

Image title

Make an index.html page, paste that into it and boom! You got simple, performant animations.

Thanks to AirBnb and Ionic's Stencil!

9 comments

Fernando Comet, almost 5 years ago
Great! Should be like this: https://codepen.io/fernandocomet/pen/JLrbYB
4 points
- William Riley, almost 5 years ago
  Yeah!! In hindsight, embedding a Codepen would have been so much better. good work!!
  0 points
Yitong Zhang, almost 5 years ago
this is really cool! Is there a GitHub repo I can star to remember this?
2 points
- William Riley, almost 5 years ago
  Yes!! https://github.com/splitinfinities/lottie-wc
  Thank you so much, I hope you enjoy it!
  2 points
  - Derek Nguyen, almost 5 years ago
    This is awesome!
    0 points
  - Ray Chips, almost 5 years ago
    Awesome! :D
    0 points
Jamie Lovelace, almost 5 years ago
I was wondering if the guys doing lottie were going to attempt to do this further down the line. Good work - will definitely be using this in the future
1 point
Nattu Adnan, almost 5 years ago
Thank you. This is amazing. Can we add this to lottiefiles.com so its easier to embed animations on the web?
1 point
- William Riley, almost 5 years ago
  Yeah for sure! Let me know if you need anything.
  0 points

Now playing

Designer News

Join Us

Lottie animations as a web component

9 comments

Join Us

Login to Comment

Register Today