Animated crop on an image?

October 10, 2011 12:19 PM

Can you use the CSS property "clip" as in clip:rect(0px, 150px, 145px,145px) in a CSS3 transition? That is... Can I transition on a clipped region in a div? It just has to work in webkit browser. Trying to create an animated crop from 2 sides on an image.

Been beating my brains out for hours. Thanks in advance to all you folks out there brighter than me...

posted by jpburns to Computers & Internet (5 answers total)

This jQuery plugin is pretty old, but suggests no, you cannot animate it natively.
posted by misterbrandt at 1:00 PM on October 10, 2011

Response by poster: I found the answer to my own question.

Yes you can animate it, but you have to declare the crop in the original CSS before messing with it in the JavaScript portion.

Here's my DIV in CSS:

#scrollCenter
{
	-webkit-transition: all .5s ease-in-out;
clip:rect(0px, 300px, 145px,0px);
	position:absolute;
	width:300px;
	height:150px;
	top: 55px;
	left: 10px;
	overflow: hidden;
	padding: 0;
	z-index: -1;

}

and my JavaScript:

 function close() {
    var inPos=120;
    document.getElementById("scrollLeftOut").style.left = inPos + "px";
    document.getElementById("scrollRightOut").style.left=( inPos * -1) + "px";
    document.getElementById("haiku").style.opacity=0;
    document.getElementById("scrollCenter").style.clip="rect(0px, 150px, 145px,145px)";

}

posted by jpburns at 1:08 PM on October 10, 2011

Response by poster: Dang!

That method doesn't work in Mobile Safari (although it does in Safari). Does anyone else have any clever ideas?

Thanks.
posted by jpburns at 3:27 PM on October 10, 2011

There is this on Stack Overflow, maybe?
posted by misterbrandt at 8:14 AM on October 12, 2011

Best answer: Just to let anyone know... What I ended up doing was animating the xscale of the layer (using -webkit-transform), rather than using a crop. That worked visually.

Here's my final version (meant to be seen in a webkit browser, or Mobile Safari, specifically. Feel free to examine the code.
posted by jpburns at 1:01 PM on November 10, 2011