OSUblake Posted May 6, 2020 Share Posted May 6, 2020 Stuff doesn't line up. 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 More sharing options...
BFreakout Posted May 6, 2020 Author Share Posted May 6, 2020 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 More sharing options...
BFreakout Posted May 6, 2020 Author Share Posted May 6, 2020 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 More sharing options...
OSUblake Posted May 6, 2020 Share Posted May 6, 2020 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(); 2 Link to comment Share on other sites More sharing options...
BFreakout Posted May 6, 2020 Author Share Posted May 6, 2020 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 More sharing options...
BFreakout Posted May 6, 2020 Author Share Posted May 6, 2020 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 More sharing options...
OSUblake Posted May 6, 2020 Share Posted May 6, 2020 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 More sharing options...
BFreakout Posted May 6, 2020 Author Share Posted May 6, 2020 @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 More sharing options...
OSUblake Posted May 7, 2020 Share Posted May 7, 2020 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 2 1 Link to comment Share on other sites More sharing options...
BFreakout Posted May 7, 2020 Author Share Posted May 7, 2020 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 Link to comment Share on other sites More sharing options...
OSUblake Posted May 7, 2020 Share Posted May 7, 2020 Nope. Looks good! 1 Link to comment Share on other sites More sharing options...
BFreakout Posted May 7, 2020 Author Share Posted May 7, 2020 Thank you very much for your patience and your help! I will definitely talk about your library at conferences and meetups. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 7, 2020 Share Posted May 7, 2020 1 hour ago, BFreakout said: Do you notice anything else spontaneously? Maybe make the fruit appear off screen or scale/fade in so it's a little less jarring. Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 7, 2020 Share Posted May 7, 2020 It also took me some time to figure out how to do the first one. Maybe a hint or show answer functionality would be helpful. Link to comment Share on other sites More sharing options...
rodriciru Posted May 20, 2020 Share Posted May 20, 2020 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 More sharing options...
ZachSaucier Posted May 20, 2020 Share Posted May 20, 2020 Hey @rodriciru and welcome to the GreenSock forums! Can you please create a minimal demo that demonstrates the issue(s) that you're running into? This thread has more details on how to do so: 1 Link to comment Share on other sites More sharing options...
rodriciru Posted May 20, 2020 Share Posted May 20, 2020 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 More sharing options...
Oscar Evans Posted August 24, 2021 Share Posted August 24, 2021 On 5/1/2020 at 10:41 AM, OSUblake said: I've tried to create something similar to this but it works on scrolltrigger, I'm unable to achieve my target. can someone guide me? Link to comment Share on other sites More sharing options...
GreenSock Posted August 24, 2021 Share Posted August 24, 2021 @Oscar Evans welcome to the forums. It looks like something went wrong with your post - I don't see any minimal demo or context at all. Can you please be more specific about what GSAP-specific question you have? A minimal demo will significantly increase your chances of getting a helpful answer too. Happy tweening! 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