CODEWITHSUNDEEP
csscss-animationsclip-path
Martin Velchevski
Martin Velchevski

Reputation: 904

CSS 'clip-path' morph animation doesn't work in Chrome and Firefox, works flawlessly in Safari

So I have this animation (triggers on hover). --> Morph Animation on CodePen

Works amazingly smooth in Safari, it's amazingly jarring in Chrome but it doesn't work at all in Firefox.

I would appreciate if someone could point me in the right direction. Is this even fixable in some way?

Code:

HTML:

<div class="shape-container">
  <div class="shape"></div>
</div>

SCSS:

$globalWidth: 48px;
$globalHeight: 48px;

$zenGreen: #38CA4B;
$zenRed: #F32847;

@mixin transition($duration) {
  transition: all $duration cubic-bezier(0.785, 0.135, 0.150, 0.860);;
}

@mixin shapeStroke() {

}

/* Center the demo */
html, body { height: 100%; background: #008ace;}
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.shape-container {
  width: $globalWidth;
  height: $globalHeight;
  @include transition(600ms);
  &:hover {
    @include transition(600ms);
    transform: rotateZ(-180deg);
    .shape {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: scaleX(1);
      &:before {
        clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 5% 95%);
        background: $zenGreen;
      }
      &:after {
clip-path: polygon(25% 48%, 43% 62%, 75% 20%, 89% 31%, 75% 49%, 61% 68%, 45% 87%, 14% 61%);
        transform: rotateZ(180deg) translateY(8px);
      }
    } 
  }
}

.shape {
  width: $globalWidth;
  height: $globalHeight;
  background: white;
  clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%);
  @include transition(600ms);
  transform: scaleX(1.2);
  position: relative;
  &:before {
    @include transition(600ms);
    content: "";
    display: block;
    background: $zenRed;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 10%, 50% 10%, 92% 95%, 8% 95%);
  }
  &:after {
    @include transition(600ms);
    content: "";
    display: block;
    position: absolute;
    width: 50%;
    height: 50%;
    top: 20px;
    left: 12px;
    z-index: 1000;
    clip-path: polygon(41% 10%, 57% 10%, 57% 50%, 41% 50%, 41% 57%, 56% 57%, 57% 73%, 41% 73%);
    background: white;
  }
}

Upvotes: 0

Views: 1946

Answers (1)

Gust van de Wal
Gust van de Wal

Reputation: 5291

As of this moment, clip-path's aren't that well supported, yet. I've had a lot of problems with it myself, and I don't have a solution for all of the problems with clip-path. What I do know, is that overflow: hidden can sometimes save the day. Well, 50% of it in this case.

Option 1: add overflow: hidden to .shape. At this point, the 'triangle-to-box' animation works fine in Chrome.

Option 2: remove the transform from .shape-container:hover .shape:after. At this point, the 'exclamation mark-to-check mark' animation will work fine.

The downside is that these two are not combinable for some reason. And option 2 doesn't give the right result, although you could rotate the shape of the check mark 180deg by hardcoding the polygraph points 180deg around the center of rotation (which you could then shift 8px down, because that's what you also translate).

I do have a solution, though. For the last couple hours, I've been trying to remake your pen with things that are widely supported. You can take a look at this Fiddle.

I've changed the containing element to be an svg element with a polygon inside, that always keeps the same stroke-width. Its animation is triggered by a little piece of JavaScript. Also, the animation of the exclamation and check mark is completely different from yours, but I think it looks neat.

Although this is a late answer, I hope it still helps you.

Upvotes: 1

Related Questions