beocycris
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by beocycris
-
-
12 minutes ago, Shrug ¯\_(ツ)_/¯ said:
You could utilize the approach seen in the following thread as a simplitic approach to creating some motion. ¯\_(ツ)_/¯
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.
-
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
-
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!
-
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?????
-
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
-
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
See the Pen PoqdjBr by beocycris (@beocycris) on CodePen
Filling Kettles Problem
in GSAP
Posted
Thank you very very much!!!