JCrafts Animation — JCrafts Design System

HTML Code (Demo)

<jcrafts-animation src="/assets/images/animations/jclogo-animated-friction-optimized.svg" id="jcrafts-animation-1" class="jcrafts-logo-animation">
  <img src="/assets/images/logo/jclogo.svg" class="visually-hidden">
  <div class="control-panel">
    <button data-action="replay" class="btn btn-replay">
      <span class="fa fa-refresh icon-replay"></span>
      <span class="visually-hidden">Replay</span>
    </button>
    <button data-action="play-pause" class="btn btn-playpause">
      <span class="fa fa-pause icon-playpause"></span>
      <span class="visually-hidden">Play/Pause</span>
    </button>
  </div>
</jcrafts-animation>

Configuration

Component Config: Interactive/Animations/jcrafts-animation/jcrafts-animation.config.js

{
  "src": "/assets/images/animations/jclogo-animated-friction-optimized.svg",
  "fallbackimg": "/assets/images/logo/jclogo.svg",
  "class": "jcrafts-logo-animation",
  "id": "jcrafts-animation-1"
}