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, presets, 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;
const boxMation = Mation(dimensions);

button.onclick = () => {
	dimensions = dimensions > 100 ? 100 : 500;
  boxMation.moveTo(spring(dimensions, presets.wobbly));
};

boxMation.on(modifyContainer);