Hide div with circle mask

Question

Hide div with circle mask

55 views Asked by kalempster At 24 January 2024 at 17:14

I'm trying to achieve this "simple" effect which will just hide a div element with a circle. It would look something like this:

I'm currently using Motion One for solid but will accept any answer even in pure CSS (however I would prefer using Motion One). I was trying to achieve this effect with mask however I couldn't interpolate the values inside the gradient -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0) 50%); (the 50%). The gradient would just go from 50% to 0% without interpolation.

Original Q&A

There are 1 answers

**arifulsajib** · Answer 1 · 2024-01-24T17:56:08+00:00

This effect using pure CSS:

@keyframes revealAnimation {
      0% {
        clip-path: circle(100% at 50% 50%);
      }
      100% {
        clip-path: circle(0% at 50% 50%);
      }
    }

    .actual-content {
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: black;
      position: relative;
      width: 200px;
      height: 200px;
      overflow: hidden;
    }

    .mask-content {
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      animation: revealAnimation 2s forwards;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="actual-content">
    <h1>Page Content</h1>
    <div class="mask-content">
      <h1>Logo</h1>
    </div>
  </div>
</body>
</html>

TechQA.

Hide div with circle mask

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in SOLID-JS

Popular Questions

Popular Tags

Trending Questions