welliba-index animation

- for welliba

by Ercan Cicek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.13/lottie.min.js"></script>

<div id="card">
  <span id="head">Your Welliba-Index</span>
  <div id="anim"></div>
  <span id="caption"></span>
  <span id="lorem">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed egestas neque, risus viverra viverra. Et habitant mollis condimentum pretium ac commodo dictumst tellus. Diam duis cursus pellentesque nunc eros eget lacus, justo. Rhoncus tristique eu scelerisque pharetra neque eu. In fermentum, et curabitur cras. Ultrices consectetur varius eu cras lorem fringilla suscipit et duis. Euismod sit vel.
  </span>
</div>

<div id="button-wrapper">
  <span id="state">state:</span>
  <form>
    <input type="radio" name="indexState" value="best" id="choice-best" onClick="switchAnimation();" checked='true'> 
    <label for="choice-best">best</label>
    <input type="radio" name="indexState" value="good" id="choice-good" onClick="switchAnimation();"> 
    <label for="choice-best">good</label>
    <input type="radio" name="indexState" value="neutral" id="choice-neutral" onClick="switchAnimation();">
    <label for="choice-neutral">neutral</label>
    <input type="radio" name="indexState" value="bad" id="choice-bad" onClick="switchAnimation();">
    <label for="choice-neutral">bad</label>
    <input type="radio" name="indexState" value="worst" id="choice-worst" onClick="switchAnimation();">
    <label for="choice-worst">worst</label>
  </form>
  <br><br>
  <button id="play-btn" onClick="startAnimation();">Start Animation</button>
</div>

SCSS

@import url(//fonts.googleapis.com/css?family=Poppins:200,400);

body {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #FAF8FF;
  #card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 700px;
    > span {
      text-align: center;
      min-width: 286px;
      font-family: Poppins, sans-serif;
      font-style: normal;
      &#head {
        font-weight: 200;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 0.01em;
      }
      &#caption {
        font-weight: normal;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.02em;
        margin-top: 8px;
      }
      &#lorem {
        text-align: left;
        font-weight: 200;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.02em;
        margin-top: 40px;
      }
      color: rgba(9, 6, 66, 0.9);
    }
    > #anim{
      margin-top: 32px;
      width: 286px;
    }
  }
  #button-wrapper {
    border: 1px solid gray;
    padding: 8px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
}

JavaScript

setTimeout(function() {
	switchAnimation();
}, 10);

function startAnimation() {
	lottie.stop();
	lottie.play();
}

function switchAnimation() {
  lottie.destroy();
  var checkedState = document.querySelector('input[name="indexState"]:checked').value;
  var curState = checkedState || 'best'; 
  document.getElementById('caption').innerText = checkedState || 'excellent';
  lottie.loadAnimation({
    container: document.getElementById('anim'),
    loop: false,
    autoplay: false,
    animationData: JSON.parse(animData[curState])
  });
}

var animData = {
	best: '{"v":"5.7.4","fr":60,"ip":0,"op":90,"w":1920,"h":864,"nm":"Komp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":9,"ty":4,"nm":"bars_fill_best","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[960.087,465.718,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[99.679,97.394,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,250],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":200,"ix":4},"nm":"Rechteckpfad: 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0.839215695858,0.839215695858,0.839215695858,1]},{"t":16,"s":[0,0.784313738346,0.615686297417,1]}],"ix":4},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[25]},{"t":16,"s":[50]}],"ix":5},"r":1,"bm":0,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-712.377,-33.606],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[224.255,224.255],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"bar1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[80,250],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":200,"ix":4},"nm":"Rechteckpfad:...