BFreakout

Thank you very much for your patience and your help! I will definitely talk about your library at conferences and meetups.

Okay, I think I finally made it Different desktop resolutions should now work without any problems .. animation can start / stop correctly in general, etc. etc. Do you notice anything else spontaneously? https://www.rxjs-fruits.com

@OSUblake Thank you for your advice ... I changed everything ... Here are excerpts from my code ... in the class scope I have liquidAnimationTimeline .. when executing stopAllAnimations, animations are stopped immediately .. but not deleted .. that means if something is still stuck in the pipe .. and animateLiquid is executed .. come the rest from the old animations ... liquidAnimationTimeline: GSAPTimeline = gsap.timeline(); ... animateLiquid(fruitSelector) { const liquid = this.liquid.nativeElement.contentDocument.getElementById('line'); const fullSide = this.bottle.nativeElement.contentDocument.getElementById('full'); const bottle = this.bottle.nativeElement.contentDocument.getElementById('fill-rect'); const halfBoardHeight = (this.board.nativeElement.offsetHeight / 2); const boardHeight = halfBoardHeight - ((halfBoardHeight / 100) * 10); this.liquidAnimationTimeline.to(liquid, { duration: 1, attr: { y2: boardHeight }, stroke: this.getCurrentFruitColor(fruitSelector) }, '-=0.8') .call(() => this.soundService.playPouringLiquidSound(this.isRunActive)); this.liquidAnimationTimeline.to(fullSide, { duration: 1, fill: this.getMixedFruitColor(fruitSelector) }, '-=0.5').call(() => { const blows = this.bottle.nativeElement.contentDocument.getElementsByClassName('st2'); Array.from(blows).forEach(blow => blow['style'].fill = fullSide.style.fill); }); this.liquidAnimationTimeline.to(bottle, { duration: 1, attr: { height: this.calcCurrentBottleHeight() } }, '-=0.5'); this.liquidAnimationTimeline.to(liquid, { duration: 0.5, attr: { y1: boardHeight } }, '-=0.5'); this.liquidAnimationTimeline.to(liquid, { duration: 0, attr: { y1: 10, y2: 10 } }); } ... stopAllAnimations() { this.conveyorBeltAnimationTimeline?.pause(); this.liquidAnimationTimeline.pause(); this.liquidAnimationTimeline.clear(); this.liquidAnimationTimeline.progress(0).clear(); this.liquidAnimationTimeline.progress(1).clear(); this.liquidAnimationTimeline.progress(2).clear(); this.liquidAnimationTimeline.progress(3).clear(); this.soundService.stopAll(); }

I now have the following trick that works well .. I get the height from the board ... the liquid is always from half the screen .. divide the height from the board in two ... and subtract 10% .. then it works without problems with the liquid I only have a problem with the height of the svg graphic .. if I set it to 100% .. I get a scrollbar and the svg graphic has a clear length .. it just has to fix it and then everything should work

the svg are nested in object elements .. i would normally only need the distance of the objects at the end!? your progress clear does not work either ... my timeline is divided in the class and when I click the button I want to remove everything from this instance ..

another question, if you stop the run and start again, other unfinished animations continue ... I tried to reset the timeline with clear .. but unfortunately it doesn't work ... how can I completely reset existing timelines ?! so that you don't do your old things while playing ?!

Thanks for your feedback! I had made a prototype with an svg .. then had other problems .. I try to find out the distance between the funnel and the bottle and set the value dynamically .. then it should work ...

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

@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

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:

I use gsap 3.2.5 already..

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

And a part of my SVG: <defs> <clipPath id="cp"> <rect id="fill-rect" x="0" y="0" width="100%" height="100%" /> </clipPath> </defs> <g 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"/> <g 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>

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 + '%' } });

@OSUblake thanks... I will use your sample