Sergi Sergi - 1 month ago 7
CSS Question

Smooth animation on a div with clip-path

I would like to achieve a smooth animation on hover where an element slides in, the element is clipped using clip-path but so when it slides in it looks all jagged until it reaches the final position, is there a way for it not to look jagged? Or a better solution using similar simple code? Code and JSFiddle:

https://jsfiddle.net/4bcvydpu/

HTML

<html>
<body>

<div class ="mainCard">

<div class="topEntrance fadeInDown">
</div>

</div><!--mainCard-->

</body>
</html>


CSS

.mainCard {
background-color: blue;
height: 500px;
width: 400px;
}

.topEntrance {
background-color: black;
height: 200px;
width: 400px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 35%);
color: white;
}


Javascript

$(".topEntrance").hide();

$(".mainCard").on('mouseenter', function() {
$(".topEntrance").animate({
width: "toggle"
})
});


$(".mainCard").on('mouseleave', function() {
$(".topEntrance").animate({
width: "toggle"
})
})

Answer

You can do that without javascript, using only CSS.

First remove your javascript, than add this changes to your CSS:

.mainCard {
  background-color: blue;
  height: 500px;
  width: 400px;
  overflow:hidden;
}

.topEntrance {
  background-color: black;
  height: 200px;
  width: 400px;
  -webkit-clip-path: polygon(100% 100%, 100% 0, 0 0, 0 35%);
  color: white;
  position:relative;
  left:-100%;
  -webkit-transition: all 0.4s ease;
}

.mainCard:hover .topEntrance{
  left:0;
}