Animating a glass filling with water

[bcavenagh]

I am trying to animate the glass filling with water by just changing the height of the water from 0% to 100% but nothing is happening. Can you animate the specific groups in an SVG rather than the whole SVG or do I need them to be separate files?

See the Pen WKYbMN?editors=1010 by bcavenagh (@bcavenagh) on CodePen

[PointC]

Hi @bcavenagh 

 

Welcome to the forum. 

 

You can target groups. I think scaleY is the effect you were looking for in your demo.

 

 

See the Pen YjRXRP by PointC (@PointC) on CodePen

But for a fill animation like that I think a clip-path or mask would yield a better animation. This is an answer to a different forum question, but shows the same concept.

 

See the Pen oLXjvr by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

 

[bcavenagh]

Could you help me create a clip path for the cup? I'm new to all of this and have no idea how to use clip-paths or masks. I'm trying to just replace the beer glass in the example with the glass svg from my image but it just gives me a spikey figure and the animation no longer does anything. How do I recreate that beer glass with my own stuff?

[PointC]

Here's a quick clip-path version of your demo. I just eyeballed a polygon so it doesn't line up perfectly, but it should give you an idea how it works.

 

See the Pen EpOPwm by PointC (@PointC) on CodePen

Here are a couple good sources of info about masks and clip-paths.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

https://css-tricks.com/masking-vs-clipping-use/

 

Happy tweening.