Jump to content
Search Community

Filling Kettles Problem

beocycris test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

I'm not sure I follow, but I'd set the fill elements with gsap and then tween them to any scaleY and opacity you like. Maybe something like this:

 

gsap.set("#filling_empty", {
  transformOrigin: "center bottom",
  scaleY: 0,
  opacity: 0
});
gsap.to("#filling_empty", { scaleY: 0.5, opacity: 0.5 });

You can also look at using a mask or clip-path. You may find this thread helpful.

 

Happy tweening.

 

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

5 minutes ago, beocycris said:

i cant put a connection between the linear gradient of the filling, and changing it via a Tweenmax statement.

You're attempting to animate the d attribute of stop values of gradients. That doesn't make much sense. d attributes are for SVG <paths>. You need to use a different approach, such as the wavify library in the linked thread (you didn't load it in your pen) or the canvas approach (which I recommend) by Blake:

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...