BodyMovin web components

# Lottie Animation

Ready

- HTML
- View
- Context
- Info
- Notes

`

    <lottie-animation src="../../assets/animations/sample--goal-achived.json" loop="false" autoplay="true">
    </lottie-animation>

`
`

    {% if autoplay == 'false' %}
    <script type="text/javascript">
      var playAnimation = function () {
        document.querySelector('lottie-animation').play();
      }
    </script>

    <hr/>
    <button onclick="playAnimation()">play</button>
    <hr/>
    {% endif %}

    <lottie-animation
      src="{{ src }}"
      loop="{{ loop }}"
      autoplay="{{ autoplay }}">
    </lottie-animation>

`
`

    {
      "src": "../../assets/animations/sample--goal-achived.json",
      "loop": "false",
      "autoplay": "true"
    }

`

- Handle: @lottie-animation
- Variants (5): Default , Lottie Animation , Lottie Animation Loop , Lottie Animation Autoplay , Lottie Animation Autoplay Loop
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/lottie-animation/lottie-animation.preview.nunj

There are no notes for this item.