JSFiddle - React, Tailwind, and code Playground

by davidck

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://raw.github.com/davidck/Fx.Anything/master/Source/Fx.Anything.js"></script>
<h1>Fx.Anything</h1>
<h2>Canvas Animation Sample: MouseEnter</h2>

<div id="holder">
    <img id="photo" src="http://raphaeljs.com/bd.jpg" width="320" height="240" alt="Test" />
</div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>

CSS

body {
    background: #333;
    font-family: Arial;
}

h1, h2 {
 color: #fff;     
 display: block;
 padding: 10px 20px 0 20px;
}

h1 {
  font-size: 22px;   
}

JavaScript

Raphael(function () {
    var img = document.getElementById("photo");
    img.style.display = "none";
    var r = Raphael("holder", 600, 540);
    
    var mainImage = r.image(img.src, 140, 140, 320, 240).attr({
        opacity: 0.5
    });

    new Asset.image(img.src, {
        onLoad: function() {

    var scaleTo = 0.5;
    var fx = new Fx.Anything({
        duration: 2000,
        link: 'cancel',
        transition: Fx.Transitions.Elastic.easeOut,
        onReport: function(progress, state) {
            var newScale = (state == 'on') ? progress * scaleTo + 1 : (1+scaleTo) - (progress * scaleTo);
            mainImage.transform('s'+newScale);
            mainImage.attr({
                opacity: newScale-0.5
            });
        }   
    });
    document.id('holder').addEvents({
        mouseenter: fx.start.bind(fx, 'on'),
        mouseleave: fx.start.bind(fx, 'off')
    });
            
        }            
    });
});