react-animation-engine
Version:
Extract famo.us transitionable capabilities in 14kb for react. Mixin to transition between state values.
45 lines (38 loc) • 1.1 kB
HTML
<html>
<head>
<script src="./raf.js"></script>
<script src="../build/global/FamousAnimations.js"></script>
<script src="//sprintjs.com/prod"></script>
</head>
<body>
<script>
var PropertyAnimator = FamousAnimations.PropertyAnimator;
function createDiv() {
var div = $('<div></div>');
div.text("Loader");
div.css({
color: 'white',
width: 200,
backgroundColor: "blue"
})
$('body').append(div);
return div.get(0);
}
function start() {
var div = createDiv();
var totalWidth = $('body').width();
// Instanciate an animator
var animator = new PropertyAnimator(div);
// Animate the property
animator.set('style.width',
totalWidth,
{method: 'wall', dampingRatio : 0.3, period : 800}
);
}
$(document).ready(function() {
start()
});
</script>
</body>
</html>