Jump to content
GreenSock

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

Fill a bottle

Recommended Posts

Hello Community,
I am currently working on an open source community project. It is a game (www.rxjs-fruits.com) - Here fruit is supposed to fall into a funnel and the liquid is to be poured into a bottle. I have now got the SVG graphic for a bottle from a designer. Somehow I just line up too stupid to have the bottle filled. Does anyone have any idea how I can best solve this?

image.thumb.png.a9ef661b5b1a5f6d8532ae8e77c39166.png

Maybe also how I can drop the fruit more beautifully off the assembly line? As a non-designer, I make it really difficult here.

bottle.svg

Link to comment
Share on other sites

Okay, I solved it.. I add a new white layer and add an clipPath... then I animate it with to set an attr and height value.
But an review of my app with animation are very welcome :) 

  • Like 1
Link to comment
Share on other sites

2 hours ago, BFreakout said:

But an review of my app with animation are very welcome :)

 

I don't know rxjs. I had to stop at level 7 because I don't understand how to do that. There needs to be some type of hinting, or a way to show the solution.

 

So what is the solution?

 

I also think having to search/replace strings isn't approachable for people trying to learn. That's going to require some googling for some people, and you don't want people to leave your app.

 

Link to comment
Share on other sites

1 hour ago, OSUblake said:

I had to stop at level 7 because I don't understand how to do that.

 

Guess like this.

 

fruits.pipe(

    filter(v => v === "apple" || v === "dirty-banana"),
    map(v => v.replace("dirty-", "")),
    take(2)

).subscribe(fruit => toConveyorBelt(fruit));

 

Level 11 was confusing at first because I didn't see the first elements in the arrays.

 

image.png.95fb42e8ac4f63158414d48472b2044e.png

 

 

Other than that, it's looks pretty good.

 

Link to comment
Share on other sites

Thank you for testing .. and great that you enjoyed it ;)

The game will not be a complete introduction to rxjs, you would have to put a lot more text into it ... it should support the devs that deal with it a lot more busy and have difficulty understanding it...
 

With the mouse pointer over the codes in the text, show a small note .. otherwise there are the links that explain everything in more detail ..


I also have the version with the bottle online .. can now be filled ..

I'm just waiting for more graphics from the designer .. funnel ... old fruit .. background .. etc.

Link to comment
Share on other sites

Depends on how much complexity you want to add. I would search on CodePen for stuff like liquid, wave, and goo. 

 

Here's an example that came up.

 

See the Pen bVKXvj by elrumordelaluz (@elrumordelaluz) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

Other more simple approaches:

 

  • Like 3
Link to comment
Share on other sites

the bottle is already filled with animation.. but what looks nice from funnel to bottle ... not just a rectangle that moves to the bottle ?!
It doesn't look that great, does it ?!

Link to comment
Share on other sites

Whereby the example of OSUblake looks really cool ... only that would have to flow in the middle .. definitely derp complex ..

Link to comment
Share on other sites

Mega! Unfortunately, this does not work on my current solution ...

 

Currently I fill my bottle with:

      const bottle = this.bottle.nativeElement.contentDocument.getElementById('fill-rect');
      this.currentBottleHeight = this.currentBottleHeight - (100 / this.fruits.length);
 
      const timeline = new TimelineLite();
      timeline.to(bottle, 1, { attr: { height: this.currentBottleHeight + '%' } });
Link to comment
Share on other sites

And a part of my SVG:

 

        <defs>
            <clipPath id="cp">
                <rect id="fill-rect" x="0" y="0" width="100%" height="100%" />
            </clipPath>
        </defs>
        <class="st0">
            <path class="st1" d="M228.3,174.1c-10.5-30.5-15.8-62.5-15.8-94.6v-67H63.9v67c0,32.2-5.3,64.1-15.8,94.6L16,267.7
            C5.5,298.2,0.2,330.2,0.2,362.3C0.2,517,1.4,596.3,3.8,600c0,0,262.4,0,269.1,0c3.9-7.8,5-87,3.4-237.7c0-32.2-5.3-64.1-15.8-94.6
            L228.3,174.1z"/>
            <id="bottle">
                <path id="full" class="st2" d="M210,179.1l32.2,93.8C252,301.3,257,330.9,257,361v217.2H22.6V361c0-30,5-59.7,14.7-88.2
                l32.2-93.7c11.2-32.7,16.9-66.8,16.9-101.3h106.5C193.1,112.2,198.8,146.3,210,179.1z"/>
                <path id="left" class="st3" d="M138.2,578.2H22.6V361c0-30,4.9-59.7,14.5-88.2l31.8-93.7C80,146.3,85.7,112.2,85.7,77.7h52.5
                V578.2z"/>
            </g>
Link to comment
Share on other sites

13 hours ago, BFreakout said:

Unfortunately, this does not work on my current solution ...

Why not?

 

I'm also curious why you're using the GSAP 2 formatting.

Link to comment
Share on other sites

@ZachSaucier Am I using an older version?
 

I probably put it wrong ... I can't just use the @OSUblake wave effect with my existing code ... I experimented with it a bit .. but unfortunately I don't get it really regulated ... even filling it doesn't look really great... it is an open source community project .. but I would pay someone to help me with it .. just want it to be something great .. every moment my wife can have the baby and I may not get it over time more regulated .. is anyone interested? I would also help with the orientation of the code by remote ..

Link to comment
Share on other sites

See this post (and those linked in it) for more information about GSAP 3, the newer and better version :) 

Link to comment
Share on other sites

I have now tried to animate the liquid from the funnel to the bottle... of course the animation does not go beyond the graphics...

Now a question for you.. what is best practices...

Place all necessary graphics in an SVG and store the animations... or treat individual SVG graphics in a distributed manner?
My only problem is that the fruit has to be added dynamically... which makes everything in a svg a little more difficult... especially if you would prefer a path animation...

Currently I separated it:image.thumb.png.0ed394ddd3f151b4ac7cd2e027bb2730.png

Link to comment
Share on other sites

On 5/3/2020 at 7:57 AM, BFreakout said:

I use gsap 3.2.5 already..

Yep. I'm wondering why you're using the GSAP 2 formatting. In GSAP 3 there's no Lite/Max flavors, duration is included in the vars, and other improvements like that. The old stuff is just supported for legacy reasons. Read the article I linked to to learn more :) 

 

23 hours ago, BFreakout said:

Place all necessary graphics in an SVG and store the animations... or treat individual SVG graphics in a distributed manner?
My only problem is that the fruit has to be added dynamically... which makes everything in a svg a little more difficult...

Either way is doable. If they are separate then at times you'll have to use JS to calculate things and resize as appropriate. If they're together you have to spend time on the frontend making sure it sizes the way that you want it to. In general it's best to keep things in the same SVG but there's no rule against separating them.

Link to comment
Share on other sites

@ZachSaucier thank you for your information! Helped me a lot ...
 

I once set up a prototype and combined all SVG graphics into one SVG graphic using Adobe Illistrator.

I tried to do an animation with a path and motionpath. Unfortunately it doesn't scale at all and the animation doesn't exactly follow the path ...
 

i think i will work with separate svg graphics again. Unfortunately, positioning here is really a problem .. you have to constantly query it with javascrpt and they are not always 100% accurate .. so I don't really get the water in the middle of the funnel ..
 

I'm really frustrated :(

Link to comment
Share on other sites

3 minutes ago, BFreakout said:

it doesn't scale

Recreate it on resize.

 

3 minutes ago, BFreakout said:

the animation doesn't exactly follow the path

I would bet it is, just maybe not what you're expecting :) Create a minimal demo if you are looking to get help.

 

4 minutes ago, BFreakout said:

you have to constantly query it with javascrpt

I don't know what you mean here.

 

4 minutes ago, BFreakout said:

they are not always 100% accurate

Again, I bet it is accurate, just not what you're expecting :) 

 

Talking about things in abstract is not very productive.

Link to comment
Share on other sites

I think I have now got the animations nice ... I also added a sound ... unfortunately when filling the bottle it does not produce such a beautiful water effect, it does not work as well as in the example of @OSUblake
 

but what is your opinion? Please feedback: https://www.rxjs-fruits.com

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.
×