Nation Library - Creating a new animation

Demonstration of creating a new animation with the NATION library.

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<div class="js-anim">
  
</div>

CSS

.js-anim {
  position: relative;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background: #ff0066
}

JavaScript

var element = document.documentElement.querySelector(".js-anim");
NATION.Animation.start(element, {
    transform: "rotate(90deg)", 
    width: "170px",
    backgroundColor: "rgb(0, 255, 0)"
  }, {
    bounce: true, 
    easing: "easeInOutQuad"
  });