CODEWITHSUNDEEP
csssvg
justin.esders
justin.esders

Reputation: 1416

Getting SVG mask to animate correctly

What I would like to do is have a rectangle slide up from the bottom of an svg to make the svg look like it is filling up. For some reason I can't get my mask to work. Can someone see where I am going wrong and help me fix my mistake?

Below is the code and codepen for reference.

HTML

<svg  viewBox="0 0 600 600" >
    <defs>
      <mask id="mask">
        <path fill="#000" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-
    71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-
    109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <g id="rect">
            <rect fill="#fff" x="0" y="0" width="500" height="500"></rect>
        </g>
      </mask>
    </defs>

      <g id="masked" mask="url(#mask)">
        <path fill="green" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-
    71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-
    109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <rect x="0" y="0" width="500" height="500"></rect>
      </g>
    </svg>

CSS

body {
  background-color: #FFF;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height:100%;
  visibility: visible;
}

svg rect {
  transform:translateY(100%);
  transition:all 1s ease;
}

.ready svg rect {
  transform:translateY(0);
}

Codepen

https://codepen.io/Jesders88/pen/yzOVBZ

Upvotes: 0

Views: 297

Answers (1)

Sergey
Sergey

Reputation: 7692

I think you wanted this https://codepen.io/CrUsH20/pen/bopBmZ (forked)

I changed the colour of the box, that moves up, to white and path to black, then I changed movement, because you made something like erasing. It moved from bottom to top and it showed like we have the letter and then it hides. So I set initial translateY = 0 and end final to -100% for movement to top and open the letter.

<svg  viewBox="0 0 600 600" >
    <defs>
      <mask id="mask">
        <path fill="#fff" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <g id="rect">
            <rect fill="#000" x="0" y="0" width="500" height="500"></rect>
        </g>
      </mask>
    </defs>

      <g id="masked" mask="url(#mask)">
        <path fill="green" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <rect x="0" y="0" width="500" height="500"></rect>
      </g>
  </svg>

CSS

body {
  background-color: #FFF;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height:100%;
  visibility: visible;
}

svg rect {
  transform:translateY(0);
  transition:all 1s ease;
}

.ready svg rect {
  transform:translateY(-100%);
}

JS

$(document).ready(function(){
  $('html').addClass('ready')
})

Upvotes: 1

Related Questions