Search code examples
jquerycssjquery-animateclip-path

how I would animate clip-path with jquery

I'm trying to create animation button with mouse over, but I have some problem with animation. I have tried several way to make it done, unfortunately, I couldn't.

The action should be like this

enter image description here

enter image description here

enter image description here

but I have two

first

enter image description here

second

enter image description here

 $(document).on("mouseover", ".sider_button_txt", function () {
  var dataId = $(this).attr("data-id").replace("txt","box");
  
  if ($("[data-id='"+ dataId +"']").attr("class") === "right_side")
  {
  $("[data-id='"+ dataId +"']").addClass("right_side_adjust");
  }
     $("[data-id='"+ dataId +"']").animate({
   			height: 0 + "%"
   		});
});

$(document).on("mouseout", ".sider_button_txt", function () {
 var dataId = $(this).attr("data-id").replace("txt","box");
 
  if ($("[data-id='"+ dataId +"']").attr("class") === "right_side")
  {
  $("[data-id='"+ dataId +"']").removeClass("right_side_adjust");
  }
  $("[data-id='"+ dataId +"']").animate({
   height: 100 + "%"
   });
});
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
/* Center the demo */
html, body { height: 100%; }
body {display: flex; justify-content: center; align-items: center;}
div#box_container{width:600px; height:100px; background-color:#ef6224;}
p{font-family:'Droid Arabic Kufi', serif !important; }

div#left_side_shape { position: relative; width: 100%; height: 100%; background-color: #333333;
	-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
 /* clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
  float:left;
  z-index:0;
}

.right_side_adjust
{
  margin-top:-16.75% !important;
  float:left !important;
}

div#right_side_shape{
  position: relative;
  width: 100%;
	height: 100%;
	background-color: #222222;
	-webkit-clip-path: polygon(0 100%, 40% 100%, 60% 0, 0 0);
  /*clip-path: polygon(60% 0, 0 0, 0 100%, 40% 100%);*/
  z-index:0;
}

#left_side_txt{
  font-size:45px;
  color:#ffffff;
  margin-left:-575px; 
  z-index:1;
  font-family:'Droid Arabic Kufi', serif;
}

#right_side_txt{
  z-index:1;
 /* float:right;*/
  color:#ffffff;
  font-size:40px;
  margin-left:100px;
  font-family:'Droid Arabic Kufi', serif;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id= "box_container">

<div id='left_side_shape' class="left_side" data-id="love_stream_en_box">
  
</div>
<div id='right_side_shape' class="right_side" data-id="love_stream_ar_box">
 
</div> 
</div>

 <p id='left_side_txt' class="sider_button_txt" data-id="love_stream_en_txt">
 Lovestream
 </p>
 <p id='right_side_txt' class="sider_button_txt" data-id="love_stream_ar_txt">
 حب المشاهدة
 </p>

thanks for all of you

Solution

  • No need to use jquery, it can be animated without jquery, but this technique may only work in Google Chrome; check this example.

    div#entext
{
  z-index:-1;
  position: relative;
  width:100%;
  height:100%;
  -webkit-clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  clip-path: polygon(0 0, 40% 0, 60% 100%, 0 100%);
  background-color:#444444;
  transition: all 1s;
}
#entextp:hover + #entext {
 -webkit-clip-path: polygon(0 0%, 40% 0%, 40% 0%, 0 0%);
  clip-path: polygon(0 0%, 40% 0%, 40% 0%, 0 0%);
  background-color:rgba(255,255,255,0);

}