Skip to content

Instantly share code, notes, and snippets.

@michaelvillar

michaelvillar/dynamics-blur.html

Created May 27, 2016 01:42
Show Gist options
  • Save michaelvillar/fe9cfb41058293cffa62e117f13760d3 to your computer and use it in GitHub Desktop.
Save michaelvillar/fe9cfb41058293cffa62e117f13760d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dynamics-blur.html
<!doctype html>
<html>
<head>
<script src="https://github.com/michaelvillar/dynamics.js/releases/download/1.0.0/dynamics.js"></script>
<style>
#square {
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
background: red;
filter: blur(0px);
}
</style>
</head>
<body>
<div id="square"></div>
<script>
dynamics.animate(document.querySelector('#square'), {
filter: 'blur(10px)',
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment