caio1985

Hi OSUblake, how are you? I finally managed to add the plugins to my Ionic App and get them running. I'm based my initial code on this sample https://codepen.io/GreenSock/pen/GopRwQ meaning: I'm able to draw the SVGs I'm able to animate the balloon so it follows the SVG path (motionPath) Thinking now about my use case in specific which I want this balloon to move along a SVG path but stopping along it (remember what I told you about super mario world), I started playing with TimelineMax. The reason is that I want to draw a single path and then define stop points along that path which would represent the super mario game levels the balloon would stop. This is code the I'm using: ngAfterViewInit(){ this.motionPath = MorphSVGPlugin.pathDataToBezier("#motionPath", {align:"#balloon"}); this.tl = new TimelineMax({}); this.tl.set("#balloon", {xPercent:-50, yPercent:-50}) .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-10, type:"cubic"}}, "1") .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-20, type:"cubic"}}, "2") .to("#balloon", 2, {bezier:{values:this.motionPath, xPercent:-50, type:"cubic"}}, "3"); this.tl.progress(0).pause(0); //put ball at beginning of curve } Then when I hit the animate button, it does the following: animate(){ this.tl.tweenFromTo("2", "3"); } The thing is: it is not working as I wanted and I don't know if this is the best way to accomplish what I described. I want that each .to() calls above represent one level in the game where the balloon would stop. The animate() method is not yet complete, it is just a way for me to test if it would move the balloon from -20 on xPercent to -50 but it doesn't seem to work properly after the second time I call animate(): Before calling animate() for the first time, the balloon is positioned outside the path, when animate() is first called, it puts the balloon on the beginning of the path, centered properly and moves (animates) from that point to almost 80% of the path length. Once the animation ends, the balloon returns to the beginning of the path. When I call animate() for the second time, nothing happens. Codepen

Thanks a lot OSUblake! I will try to play with it on the upcoming weeks and in case I have something new I will post it here. Appreciate the support!

Hi OSUblake, Thanks for the quick response Yes, from the examples you sent it makes it looks very simple. The last example in specific (diametric projection) which you linked to is exactly how I imagine it, of course, where the wireframe tiles are there would be buildings, etc and actually my avatar would be traveling / walking between from one red dot to the other. https://greensock.com/forums/topic/19072-onstart-firing-early/?tab=comments#comment-88670 Follow up questions if I may: On the diametric projection example, it seems MorphSVGPlugin and BezierPlugin were not used, were they? For the use case I described (ie. "super mario like experience" would you recommend using these two plugins or manually defining a route data? Ideally I wanted to ask an artist to define everything (walking paths) within the SVG Object directly so I don't need to code routes. Based on what I've seen, one of the main points here is making sure the SVG object representing the world map should have the SVG Paths created in a way that it allows Greensock plugins / methods to properly allow the effect of walking. Any suggestion on how to structure that in the best way so I can brief the artist properly? Any tools anyone can use to create mock SVGs files at least to put some concept in practice? Thanks! Caio

Hi, I develop apps using Ionic (mobile apps) and I had an idea I wanted to implement and I'm here to consult with you guys to know how hard it would be to achieve something like it. I'm completely new to Greensock.JS. Some of you might be familiar with the SNES game Super Mario World where you would walk in the world, unlocking new levels as you enter on each of them to unlock the next one. Here's an example: I want to have a similar world (although I want it to look more modern, SVG/Isometric, etc), but the principle of walking from point A to B, B to C, respecting a predefined path would be the same. I also want the camera to follow my avatar (ie. Mario). In your opinion, if I manage to get one artist to create the world in SVG for me, with the paths, etc - would it be hard to code this in Greensock? Would I need to use other libraries? Any examples, guidance would be very appreciated. Thanks in advance! Caio