Mation Example

An example with mation

by theadam

HTML

<script src="https://theadam.github.io/mation/dist/mation.js"></script>
<button id="button">Click Me!</button>
<div id="container"> </div>

CSS

#container {
  border: 1px solid black;
}

Babel + JSX

const { Mation, preset, spring } = mation;

const container = document.getElementById('container');
const button = document.getElementById('button');

function modifyContainer(dimensions) {
	container.style.height = `${dimensions}px`
  container.style.width = `${dimensions}px`;
}

let dimensions = 100;
button.onclick = () => {
	dimensions = dimensions > 100 ? 100 : 500;
  modifyContainer(dimensions);
};

modifyContainer(dimensions);