Clip-path alternatives for reveal text

Question

I am trying to implement something like this

body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 background-color: #8ce2ea;
 flex-direction: column;
}

.reveal-text,
.reveal-text::after {
 -webkit-animation-delay: 2s;
         animation-delay: 2s;
 -webkit-animation-iteration-count: 1;
         animation-iteration-count: 1;
 -webkit-animation-duration: 800ms;
         animation-duration: 800ms;
 -webkit-animation-fill-mode: both;
         animation-fill-mode: both;
 -webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
         animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
 position: relative;
 font-size: 10vw;
 display: block;
 -webkit-user-select: none;
    -moz-user-select: none;
     -ms-user-select: none;
         user-select: none;
 -webkit-animation-name: reveal-text;
         animation-name: reveal-text;
 color: #FFF;
 white-space: nowrap;
 cursor: default
 
}

.reveal-text::after {
 content: "";
 position: absolute;
 z-index: 999;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #f2f98b;
 -webkit-transform: scaleX(0);
         transform: scaleX(0);
 -webkit-transform-origin: 0 50%;
         transform-origin: 0 50%;
 pointer-events: none;
 -webkit-animation-name: revealer-text;
         animation-name: revealer-text;
}


@-webkit-keyframes reveal-text {
 from {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
 }
 to {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
 }
}


@keyframes reveal-text {
 from {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
 }
 to {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
 }
}


@-webkit-keyframes revealer-text {
 
 0%, 50% {
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
 }
 
 60%, 100% {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;  
 }

 
 60% {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
 }
 
 100% {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
}


@keyframes revealer-text {
 
 0%, 50% {
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
 }
 
 60%, 100% {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;  
 }

 
 60% {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
 }
 
 100% {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
 }
}

<h1 class="reveal-text">
 I'm here.
</h1>

But the problem is that it is not working on edge as expected, because of clip-path (text is showing from the start)

@keyframes reveal-text {
  from {
     clip-path: inset(0 100% 0 0);
  }
  to {
     clip-path: inset(0 0 0 0);
  }
}

Is there any different way to make this work in edge?

( I have read that clip-path works in edge with svg, should i create a svg with text? )

maybe put an element on top of the text, and shrink it's width ? — Rainbow, Nov 07 '18 at 10:39

Temani Afif · Accepted Answer · 2019-08-03T16:04:00.177

Here is another way where you don't have to use clip-path. Simply rely on a background color that will cover your text. You won't have transparency but you will have better support.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #8ce2ea;
  margin:0;
}

.reveal-text {
  position: relative;
  font-size: 10vw;
  color: #FFF;
}

.reveal-text::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(#f2f98b, #f2f98b), 
    linear-gradient(#8ce2ea, #8ce2ea);
  background-size: 0% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: left, right;
  animation: revealer-text 0.8s 2s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

@keyframes revealer-text {
  0% {
    background-size: 0% 100%, 100% 100%;
    background-position: left, right;
  }
  50% {
    background-size: 100% 100%, 0% 100%;
    background-position: left, right;
  }
  51% {
    background-size: 100% 100%, 0% 100%;
    background-position: right;
  }
  100% {
    background-size: 0% 100%, 0% 100%;
    background-position: right;
  }
}

<h1 class="reveal-text">
  I'm here.
</h1>

Clip-path alternatives for reveal text

1 Answers1

Linked