search

rstacruz / jquery.transit

Super-smooth CSS3 transformations and transitions for jQuery
http://ricostacruz.com/jquery.transit
7.3k stars 864 forks source link

clip-path #177

Open gamanox opened 10 years ago

gamanox commented 10 years ago

is there a way to animate a clip-path, this is the code

-webkit-clip-path: circle(90%, 90%, 1800px)

thanks a lot

pingram3541 commented 10 years ago

Did you try something like this (animates from the center out) - give your element the initial css property

-webkit-clip-path: circle(50%, 50%, 0px);

then

$('#item').transition({ "-webkit-clip-path": "circle(90%, 90%, 1800px)" },1000, ease-in-out); //1 sec long

or force css rule at beginning with no delay/duration

$('#item').transition({ "-webkit-clip-path": "circle(50%, 50%, 0px)", duration: 0 },{ "-webkit-clip-path": "circle(90%, 90%, 1800px)", duration: 1000 });