react-animation-engine
Version:
Extract famo.us transitionable capabilities in 14kb for react. Mixin to transition between state values.
65 lines (56 loc) • 1.81 kB
HTML
<html>
<head>
<script src="./raf.js"></script>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../build/global/FamousAnimations.js"></script>
</head>
<body>
<script>
var PropertyAnimator = FamousAnimations.PropertyAnimator;
function createDiv() {
var div = $('<div></div>');
div.css({
color: 'white',
opacity: 1,
width: 200,
height: 200,
margin: 'auto',
marginTop: window.innerHeight / 2 - 100,
backgroundColor: "blue"
})
$('body').append(div);
return div;
}
function start() {
var div = createDiv();
var totalWidth = $('body').width();
// Instanciate an animator
var animator = new PropertyAnimator(div.get(0));
var active = false;
function setupValue() {
//Animate the properties
animator.set('style.width',
active ? 200 : 100,
{method: 'wall', dampingRatio : 0.3, period : 800}
);
animator.set('style.height',
active ? 200 : 100,
{method: 'wall', dampingRatio : 0.3, period : 800}
);
animator.set('style.opacity',
active ? 1 : 0.5,
{method: 'wall', dampingRatio : 0.3, period : 800}
);
}
div.on('click', function() {
setupValue();
active = !active;
});
}
$(document).ready(function() {
start()
});
</script>
</body>
</html>