CODEWITHSUNDEEP
jquerycssjquery-animate
Sergi
Sergi

Reputation: 1240

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"
 })
})

Upvotes: 0

Views: 1153

Answers (1)

Okba
Okba

Reputation: 783

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;
}

Upvotes: 1

Related Questions