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({width, height}) {
	container.style.height = `${height}px`
  container.style.width = `${width}px`;
}

let dimensions = 100;
const boxMation = Mation({width: dimensions, height: dimensions});

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

boxMation.on(modifyContainer);