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