Jump to content
Search Community

Fill a bottle

BFreakout test
Moderator Tag

Recommended Posts

Stuff doesn't line up.

 

image.thumb.png.92faf38381d9670c63c1aea19ad018f8.png

 

 

It's kind of tricky problem because you are mixing dom elements, <img>,  and <svg>. Some of your SVG elements have viewBoxes on them that scales their coordinates. I think it would be easier if everything were in a single svg. Then everything could scale proportionally, and it would be easier to find distances and coordinates.

 

It's also more difficult to work with <object> tags. 

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?!

Link to comment
Share on other sites

7 minutes ago, BFreakout said:

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

 

It might not be that easy. All your SVG elements have different scaling applied to them. They really need to be in the same svg so they share the same viewBox. SVG coordinates are usually not the same as screen coordinates.

 

See the Pen c2845dc8217dbcad734ebe8df93e754d by osublake (@osublake) on CodePen

 

 

3 minutes ago, BFreakout said:

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 ?!

 

Hard to say without seeing your code. I usually do something like this to reset and clear a timeline.

tl.progress(0).clear();

 

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

2 hours ago, BFreakout said:

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

 

I don't see you doing that in your code.

 

Also, some changes you can make.

 

// import { TimelineLite, Power0, Bounce, gsap } from 'gsap';
import { gsap } from 'gsap';


//liquidAnimationTimeline: gsap.core.Timeline = gsap.timeline();
liquidAnimationTimeline: GSAPTimeline = gsap.timeline();

//conveyorBeltAnimationTimeline: TimelineLite;
conveyorBeltAnimationTimeline: GSAPTimeline;

//this.conveyorBeltAnimationTimeline = new TimelineLite();
this.conveyorBeltAnimationTimeline = gsap.timeline();

//const timeline = new TimelineLite();
//timeline.to(bottle, 0, { attr: { height: '100%' } });

const timeline = gsap.timeline()
  .set(bottle, { attr: { height: '100%' } });

// OR
gsap.set(bottle, { attr: { height: '100%' } });

// OR
bottle.setAttribute("height", "100%");

//this.conveyorBeltAnimationTimeline.to(wheels, 3, {
//  rotation: 360,
//  transformOrigin: 'center',
//  ease: Power0.easeNone,
//  repeat: -1
//}, 0);

this.conveyorBeltAnimationTimeline.to(wheels, {
  duration: 3,
  rotation: 360,
  transformOrigin: 'center',
  ease: "none",
  repeat: -1
}, 0);

 

Link to comment
Share on other sites

@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();
  }

 

Link to comment
Share on other sites

Progress is a value between [0, 1].

https://greensock.com/docs/v3/GSAP/Timeline/progress()

 

Try it like this. I think you might have had some callbacks that fired when you change the progress.

 

stopAllAnimations() {
  this.conveyorBeltAnimationTimeline?.pause();
  this.liquidAnimationTimeline.progress(0, true).clear();
  this.soundService.stopAll();
}

 

Simple demonstration

See the Pen c3e809a5d19d801cc2cae04dd4b33950 by osublake (@osublake) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi.
Im totally new to the svg and GSAP world, but even now i can see the power of this.

I want to fill a empty red wine bottle, so i have the empty bottle, and a degradate wich looks like is filled. But i cant make it work.

I can only show moving up, but its not like a fill efect. im tottaly lost. Im using this pen as the basis, but i cant get it work:

See the Pen dc9d720da2aea32cdd7c9472b0f27fec by osublake (@osublake) on CodePen


Any idea why im doing wrong??

 

bordelesa-elite-capsula.svg

Link to comment
Share on other sites

sorry guys, i have an overwrited pen, which now works as i expected, so i dont have the wrong code pen.

My problem was the svg clipath generation. I was doing on an non grouped path,then i realize that and surronding with 2 groups and then do the clipath on the outer group and everything works as in the original pen from osublake

Link to comment
Share on other sites

  • 1 year later...

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.
×
×
  • Create New...