1

I'm trying to animate an element being cut like this example of animation

but I can't figure out how to do it. I tried doing it with transparent gradient mask and shifting the position, but I couldn't make the element visible fully, only either bottom or top half of it.

.el {
   mask-image: linear-gradient(to bottom, transparent 50%, white 50%);
   mask-position-y: 0.5em;
   mask-repeat: no-repeat;
   transition: mask-position 250ms ease;
}

The text is 1em high, and when the mask position is set to -0.5em the bottom half is cut, and when 0.5em the top half is cut. Also, I need the original box to remain visible and the same dimensions to not break the overall layout. Is there a solution for this or an entirely different method? In vanilla CSS, preferably no JS, but I do have JQuery.

Improve this question

1 Answer 1

Reset to default
3

Using mask was the correct method.

p {
  margin: 50px;
  border: 3px solid;
  padding: 5px;
  width: 400px;
  font-size: 25px;
  -webkit-mask:
    linear-gradient(#000 50%,#0000 0) padding-box /* half opaque and half transparent. Cover only the padding area*/
     bottom/100% 200%, /* start at bottom, width = 100% and height = 200% */
    linear-gradient(#000 0 0); /* bottom layer covers all the area (including the border) */
  -webkit-mask-composite: xor;
          mask-composite: exclude; /* exclude top layer from bottom to keep only the border untouched */
  animation: hide 2s 1s forwards
}
@keyframes hide {
  to {-webkit-mask-position: top;} /* move to top */
}
<p>Bonbon bear claw marzipan muffin oat cake candy cheesecake. Jelly icing cheesecake sweet roll sweet roll jujubes dragée. Chocolate cake tiramisu brownie halvah shortbread tootsie roll. Toffee fruitcake pi</p>

Improve this answer
2
  • could you also make an example for reversing it and for left to right variant?
    – let
    Commented Jul 18, 2023 at 14:41
  • 1
    @let reverse the values (transparent and opaque) and the position (bottom and top). If you want left/right variation also reverse the values. the wdth needs to be 200% and the height:100% and you slide from right to left (or the opposite). Inside the gradient add a 90deg linear-gradient(90deg,#000 50%,#0000 0)
    – Temani Afif
    Commented Jul 18, 2023 at 14:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.