beocycris Posted March 22, 2020 Share Posted March 22, 2020 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 More sharing options...
PointC Posted March 22, 2020 Share Posted March 22, 2020 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. 3 Link to comment Share on other sites More sharing options...
beocycris Posted March 22, 2020 Author Share Posted March 22, 2020 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 More sharing options...
PointC Posted March 22, 2020 Share Posted March 22, 2020 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. 2 Link to comment Share on other sites More sharing options...
beocycris Posted March 22, 2020 Author Share Posted March 22, 2020 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 More sharing options...
PointC Posted March 22, 2020 Share Posted March 22, 2020 You can animate any attribute of a SVG. gsap.to(".kettlerect", { attr: { height: 0 } }); Does that help? 3 Link to comment Share on other sites More sharing options...
beocycris Posted March 22, 2020 Author Share Posted March 22, 2020 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 More sharing options...
PointC Posted March 22, 2020 Share Posted March 22, 2020 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. 3 Link to comment Share on other sites More sharing options...
beocycris Posted March 22, 2020 Author Share Posted March 22, 2020 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 More sharing options...
PointC Posted March 22, 2020 Share Posted March 22, 2020 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. 6 Link to comment Share on other sites More sharing options...
beocycris Posted March 23, 2020 Author Share Posted March 23, 2020 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! Link to comment Share on other sites More sharing options...
beocycris Posted March 25, 2020 Author Share Posted March 25, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 25, 2020 Share Posted March 25, 2020 @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: 3 Link to comment Share on other sites More sharing options...
beocycris Posted March 25, 2020 Author Share Posted March 25, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 25, 2020 Share Posted March 25, 2020 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? 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 25, 2020 Share Posted March 25, 2020 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 2 Link to comment Share on other sites More sharing options...
beocycris Posted March 25, 2020 Author Share Posted March 25, 2020 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 More sharing options...
ZachSaucier Posted March 25, 2020 Share Posted March 25, 2020 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 More sharing options...
mikel Posted March 25, 2020 Share Posted March 25, 2020 Hey @beocycris, Here comes a simple wave for hot water See the Pen wvaQGEP by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
beocycris Posted March 26, 2020 Author Share Posted March 26, 2020 Thank you very very much!!! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now