I am attempting to animate the movement of an image under a stationary mask. I have 2 methods for achieving this: one using the mask property and the other using clip
First method using Mask :
View working script at http://jsfiddle.net/2Aecz/ or below
<html>
<head>
<style>
#myimage {
clip-path: url(#mask1);
position: absolute;
}
</style>
</head>
<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
<clipPath id="mask1">
<circle cx="50" cy="50" r="50" />
</clipPath>
</defs>
</svg>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
$( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
var left = $('path, polygon, circle').attr('cx');
$('path, polygon, circle').attr('cx', left-5);
});
});
</script>
</body>
Second method using Clip
View working script at http://jsfiddle.net/XdtNy/ or below
<html>
<head>
<style>
#myimage {
mask: url("#mask2");
position: absolute;
}
</style>
</head>
<body>
<img id="myimage" src="http://lorempixel.com/100/100" >
<svg width="0" height="0">
<defs>
<mask id="mask2" >
<circle cx="50" cy="50" r="40" style="fill: #ffffff"/>
</mask>
</defs>
</svg>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$( "#myimage" ).click(function() {
$( "#myimage" ).animate({ "left": "+=5px" }, "slow" );
var left = $('path, polygon, circle').attr('cx');
$('path, polygon, circle').attr('cx', left-5);
});
});
</script>
</body>
My challenge :
How can I move the image and mask together (in reverse direction) smoothly? Is there another way to animate this?