beocycris

Thank you very very much!!!

That would be perfect! But right now after changing thie gradient, nothing happens to the filling. https://codepen.io/beocycris/pen/BaNOwPV Thank you. I do understand that. But i cant put a connection between the linear gradient of the filling, and changing it via a Tweenmax statement.

Thank you. I´ve already seen this posts. But unfortunately i don´t undersand how to usw them, with my filling gradient? I would prefer the second one.... The wave SVG motion.

Do you also know how to animate the top of the filling, that it looks like water/wave? I just check out some animations, but i´ve only found some for single lines. Thank you

Oh perfect! That´s it. Thank you very very much!

Perfect! I got it. But theres just another question. How can i change the gradient color via tween? Is there any possibility? I want to change the filling color and the height, depending on the recent temperature. I.e.: hot = red / cold = blue / standard = green?????

Not really unfortunately. I decided to use your other solution. But what if i want to change the height of each kettle seperately? And how do i change die opacity of the filling now? Here is the actual Codepen

Sorry - my mistake. No i want to use a normal rect like follogin: <rect class="kettlerect" id="bk_rect" x="432" y="32" width="87" height="125" stroke="#8ea9db" rx="30" ry="5" stroke-width="2" fill="#FFB241" /> An with this filling i want to show the filling status, via it´s height.

Thank your very much. That works! If i change the height of the filling, the proportions change too. So i´m looking for another way, to show the fillings of the kettles. Now i´ve got new rectangles with a normal filling. Can i change the height in percent?

Hey guys. Just got a problem while trying to fill a kettle. I have three different kettles, which have to filled in variable ways. So i decided to use "gsap.fromto" to animate the filling, starting from the bottom. That actually doesn´t work. And i haven´t found any solution. May you have better implementations - because i guess, there will be a lot of other issues, if i want to have different filling heights. Thank you in advance. regards frank