[Filling Kettles Problem]

Thank you very very much!!!

[Filling Kettles Problem]

12 minutes ago, Shrug ¯\_(ツ)_/¯ said:

You could utilize the approach seen in the following thread as a simplitic approach to creating some motion. ¯\_(ツ)_/¯

https://greensock.com/forums/topic/15603-getting-control-points-of-a-wave-svg-and-use-it/?do=findComment&comment=68063

 

That would be perfect! But right now after changing thie gradient, nothing happens to the filling.

 

See the Pen BaNOwPV by beocycris (@beocycris) on CodePen

 

20 minutes ago, ZachSaucier said:

Unfortunately we don't have the capacity to do it all for you.

 

What, specifically, is giving you trouble? 

 

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.

[Filling Kettles Problem]

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.

[Filling Kettles Problem]

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

[Filling Kettles Problem]

16 hours ago, PointC said:

You can animate the stop-color too. Here's a fork of your pen with some updates to GSAP3. Hopefully it helps.

 

 

 

Happy tweening.

 

Oh perfect! That´s it.

 

Thank you very very much!

[Filling Kettles Problem]

28 minutes ago, PointC said:

You can use fill-opacity:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-opacity

 

If you want each element to fill separately, you can create a tween for each one either manually or in a loop.

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?????

 

[Filling Kettles Problem]

6 minutes ago, PointC said:

You can animate any attribute of a SVG.

gsap.to(".kettlerect", { attr: { height: 0 } });

Does that help?

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

 

 

[Filling Kettles Problem]

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.

 

[Filling Kettles Problem]

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?

 

[Filling Kettles Problem]

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

See the Pen PoqdjBr by beocycris (@beocycris) on CodePen