Routing animation with lottie

- for welliba

by Ercan Cicek

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.0/lottie.min.js"></script>
<button onClick="jumpToNextPage()">toggle page</button>
<br /><br />
<div id="sim-window">
  <div id="full-content-wrapper">
    <div class="placeholder-container">
      <div class="placeholder-card"></div>
    </div>
    <div id="anim"></div>
    <div class="placeholder-container alt-pos">
      <div class="placeholder-card"></div>
    </div>
  </div>
</div>

SCSS

#sim-window {
  position: relative;
  width: 910px;
  height: 512px;
  border: 1px solid gray;
  overflow: hidden;

  > #full-content-wrapper {
    &.page-2-active {
      left: -60%;
    }
    position: absolute;
    top: 0;
    left: 0;
    transition: left 0.6s ease-in-out;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: calc(910px * 0.6) calc(910px * 0.4) calc(910px * 0.6);

    > .placeholder-container {
      &.alt-pos {
        justify-content: flex-end;
      }
      display: flex;
      align-items: flex-end;
      padding: 16px;
      > .placeholder-card {
        width: 400px;
        height: 280px;
        border-radius: 16px;
        background-color: lightgray;
      }
    }

    > #anim {
      grid-column: 2;
      grid-row: 1;
    }
  }

}

JavaScript

var anim,
  currentPage = 0;

document.addEventListener("DOMContentLoaded", function(event) {
  startAnimation();
});

function startAnimation() {
  anim = lottie.loadAnimation({
    container: document.getElementById('anim'),
    loop: false,
    autoplay: false,
    animationData: JSON.parse(animData)
  });
}

function jumpToNextPage() {
  var fullContentDiv = document.getElementById("full-content-wrapper");
  if (currentPage === 0) {
    anim.setSpeed(1);
    anim.goToAndPlay(0, true);
    currentPage = 1;
    fullContentDiv.classList.add("page-2-active");
  } else {
    anim.setSpeed(-1);
    anim.goToAndPlay(36, true);
    currentPage = 0;
    fullContentDiv.classList.remove("page-2-active");
  }
}

var animData = '{"v":"5.7.4","fr":60,"ip":0,"op":36,"w":800,"h":800,"nm":"Komp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"circular","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[680,160,0],"to":[-46.333,40,0],"ti":[46.333,-40,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":18,"s":[402,400,0],"to":[-46.333,40,0],"ti":[0,0,0]},{"t":36,"s":[129.948,668.052,0]}],"ix":2,"l":2},"a":{"a":0,"k":[282.359,-189.835,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,3.143]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,-2.786]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[666.592,666.592,100]},{"t":36,"s":[173.657,173.657,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[120,120],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Elliptischer Pfad 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.921568986481,0.921568986481,0.921568986481,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Kontur 1","mn":"ADBE Vector Graphic -...