Search code examples
javascripthtmlcsscss-animationsclip-path

How do I move a clipping mask down in CSS?

So I have a clipping mask in CSS of an image, using -webkit-clip-path: inset(0 0 90% 0); and clip-path: inset(0 0 90% 0);. What I want to do with this is have the clipping mask move down, achieving the effect of -webkit-clip-path: inset(90% 0 0 0); and clip-path: inset(90% 0 0 0);. How do I animate this using vanilla Javascript, no jQuery, so that it moves from the prior state to the latter state?

Full code:

@font-face {
    font-family: Fraktur;
    src: url(typefaces/BreitkopfFraktur.ttf);
}

@font-face {
    font-family: Noe;
    src: url(typefaces/noe.ttf);
}

html {
    background-image: url(images/hero.jpg);
    overflow-x: hidden; 
    overflow-y: auto; 

}

body {
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

h1 {
    font-family: Fraktur;
    margin-top: 15%;
    color: white;
    font-size: 12em;
    display: inline;
}
#duotonetop {
    padding: 0 0 0 0;
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    height: auto;
    position: fixed;
    display: block;
        transform: translateY(-500px);
}

.cont {
    margin-top: 15%;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="css/style.css">
 
</head>

<body>
    <center>
        <div class="cont">
            <span class="js-animate" data-speed="2" data-position="top" style="transform: translate3d(0px, 0px, 0px);">
                <h1>a</h1>
            </span>
            <h1>m</h1>
            <h1>s</h1>
            <h1>t</h1>
            <h1>e</h1>
            <h1>r</h1>
            <h1>d</h1>
            <h1>a</h1>
            <h1>m</h1>
        </div>
    </center>
    <a onclick="bottomClip()"><img id="duotonetop" src="css/images/hero_duotone.png"></a>
<script>
    function bottomClip() {
    document.getElementById("duotonetop").style.clip = "inset(90% 0 0 0)";
}

function reClip() {
    document.getElementById("duotonetop").style.clip = "inset(0 0 90% 0)";
}
</script>
</body>

</html>

Solution

  • Simply use transition since clip-path can be animated

    function bottomClip() {
  document.getElementById("duotonetop").classList.toggle("move");
}
    body {
  text-align: center;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

a {
 display:inline-block;
}

#duotonetop {
  padding: 0 0 0 0;
  clip-path: inset(0 0 90% 0);
  display: block;
  transition: 1s all;
}

#duotonetop.move {
  clip-path: inset(90% 0 0 0);
}
    <a onclick="bottomClip()"><img id="duotonetop" src="https://picsum.photos/200/200?image=1067"></a>