Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
beocycris

Filling Kettles Problem

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

Share this post


Link to post
Share on other sites

Welcome to the forum.

 

You can just add a transformOrigin like this:

 

  gsap.from("#filling_empty", {
    duration: 2,
    scaleY: 0,
    opacity: 0,
    transformOrigin: "center bottom"
  });

Happy tweening.

  • Like 3

Share this post


Link to post
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?

 

Share this post


Link to post
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

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

You can animate any attribute of a SVG.

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

Does that help?

  • Like 3

Share this post


Link to post
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?

 

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

 

 

Share this post


Link to post
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?????

 

Share this post


Link to post
Share on other sites

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

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

 

Happy tweening.

  • Like 6

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 :-)

Share this post


Link to post
Share on other sites

@beocycris There are several different ways to animate waves depending on the way you want it to look. Here are a couple of related threads:

 

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
15 minutes ago, beocycris said:

unfortunately i don´t undersand how to usw them, with my filling gradient?
I would prefer the second one.... The wave SVG motion.

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

 

What, specifically, is giving you trouble? 

  • Like 2

Share this post


Link to post
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.

Share this post


Link to post
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:

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×