I'm trying to animate an svg path for about 3 days now..
When i use the <animate> tag, the transition happens however it does so without any animation just from position A to position B.
I'd like to have a transition in between both so that is appears smoothly. What should I do ?
<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 167 1888.69">
<defs>
<style>
.cls-1 {
fill: #f2f2f2;
}
.cls-2 {
fill: #65bec0;
}
.cls-3 {
fill: #88d3cd;
}
.cls-4 {
fill: #60b9bc;
}
</style>
</defs>
<path id="glass" class="cls-1" d="M927.2,52.82c16.15,0,30.77,5.53,41.37,14.51s17.13,21.38,17.13,35.08l.3,1620.4c0,27.38-26.19,49.6-58.49,49.6-16.15,0-30.77-5.53-41.37-14.51S869,1736.52,869,1722.83l-.3-1620.4C868.71,75,894.9,52.83,927.2,52.82Z" transform="translate(-819 -52.82)"/>
<path class="cls-2" d="M881.46,1086.43h.09l-.09.06Z" transform="translate(-819 -52.82)"/>
<path id="back-liquid" class="cls-3" d="M925.15,1767.18c27.63.11,50.13-21.59,50.23-48.44L977,1285.27l.51-294.54s-26.11-2.52-49.22-16.49c-12.79-7.73-48.11,12.32-55.73,15.79l3.75,449.17,0,289.36a48.12,48.12,0,0,0,13.45,24.25A50.6,50.6,0,0,0,925.15,1767.18Z" transform="translate(-819 -52.82)"/>
<g id="front-liquid">
<path class="cls-4" transform="translate(-819 -52.82)">
<animate
id="poi_front_1"
attributeName="d"
values="M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z;
m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4Z"
begin="0s; poi_front_2.end"
dur="1s"
/>
<animate
id="poi_front_2"
attributeName="d"
values="m 929.78,1765.31 c -29.07,0.12 -52.74,-21.56 -52.87,-48.42 l -2,-433.46 -2.35,-293.4 c 0,0 29.04531,-29.79622 50.10593,-17.59673 31.46382,10.78462 34.47963,16.02568 55.52938,6.71575 L 980.9,1437.29 l 0.17,289.36 c -2.14495,9.3171 -7.04817,17.7714 -14.07,24.26 -10.15255,9.3127 -23.4433,14.4547 -37.22,14.4 z;
M929.78,1765.31c-29.07.12-52.74-21.56-52.87-48.42l-2-433.46-.74-294.54s28.27,1.81,51-14.37c14.77-10.5,47,4.34,53.86,15.48l1.87,447.29.17,289.36A47.56,47.56,0,0,1,967,1750.91,54.74,54.74,0,0,1,929.78,1765.31Z"
begin="poi_front_1.end"
dur="1.5s"
/>
</path>
</g>
</svg>
</div>html,body {width:100%; height:100%;}
.container{
width: 80%;
height: 80vh;
margin:auto;
}
svg {
width: 60%;
height:80vh;
margin: auto;
}Here is a codepen demo of my svg : https://codepen.io/knudsem/pen/oNxoxrB
edit: i tried to reorganize the values, but still no luck. I don't get it, what am I missing?
Two observations:
You don't need 2 animations. You can use instead a list of 3 values for the animation: values ="v1;v2;v1" This together with repeatCount="indefinite" will do the trick.
Secondly: in this case the paths should be identical except the C and the S command in the middle. You need to keep the same commands in the same order, changing only the y value for the control points of the curves.
Also since I've changed the d attribute manually I've transformed it to all absolute using this converter: https://codepen.io/leaverou/pen/RmwzKv
<svg viewBox="0 850 167 1888.69">
<g id="front-liquid">
<path transform="translate(-819 -52.82)" stroke="red" stroke-width="5" fill="none" d="
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z">
<animate attributeName="d" values="M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,950.2,922.7,972.4
S957.1,988.4,978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z;
M929.78,1765.31
C900.71,1765.43,877.04,1743.75,876.91,1716.89
L874.91,990.03
C872.5,990 901.6,988.2 922.7,972.4
S957.1,960 978.2,979.1
L980.9,1726.65
C978.925,1735.9671,974.022,1744.42,967,1750.91
C956.847,1760.2227,943.56,1765.3647,929.78,1765.31 Z" begin="0s;" dur="1s" repeatCount="indefinite" />
</path>
</g>
</svg>I've removed the non animated paths and I've changed the viewBox value so that I'd be able to see the relevant part of the shape. You can change back to what you had,