Problem morphSVG, onComplete

[mikel]

Hi ,

 

My problems are

 

• The morphSVG Tween runs on local properly, but not in this pen (invalid morphSVG tween value: #mundAuf02)??
• The "onComplete" does its job in the first run, but not on restart (local).
• I plan to use the "onComplete:talking" several times with different 'moves'. How could this different var be implemented?

 

See the Pen BZgJzG by mikeK (@mikeK) on CodePen.

 

 

Kind regards
Mikel

 

 

[Carl]

HI Mikel,

 

It seems once MorphSVG plugin is loaded that error goes away.

The onComplete / talking() animation did not appear to run on restart because the count variable was never being reset

 

In the demo below I added MorphSVGPlugin and a small conditional that set count to 0 after it is greater than moves

 

 

See the Pen NgZyab?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

 

This works well in this reduced case, but if you want to call the talking() function a bunch of times and build talking sequences I think you will run into some trouble. Since talking() is just creating tweens and re-cursively calling itself there is no easy way to stop the talking() routine or be able to trigger another animation when its done.

 

I made some changes so that the talking() function creates a timeline of random open mouth sequences based on a talkAmount variable

 

function talking(talkAmount) {
    var tl = new TimelineLite();
    tl.set("body", {backgroundColor:"hsl(" + Math.random() * 360 + ", 50%, 50%)"});
    for (var i = 0; i < talkAmount; i++){
     tl.fromTo(mundAuf, random(0.2, 0.5), {progress:0}, {progress:random(0.1, 1), repeat:1, yoyo:true, ease:Sine.easeInOut})
   }
    return tl;
    }

 

I then built a main timeline moves the character around and has him talk when he is done moving like so:

var main = new TimelineLite()
main.add(talking(2))
main.to(".svgContainer", 0.5, {x:-200})
main.add(talking(5));
main.to(".svgContainer", 0.5, {x:0})
main.add(talking(2));

 

Check it out here:

 

See the Pen BZgYOL?editors=0110 by GreenSock (@GreenSock) on CodePen.

 

[mikel]

Hi Carl,

 

Thousand thanks - super. Especially the background colors !!! And than the random morph!  - I´m speechless.

 

Coding is still a unexplored minefield for me ...

 

Regards from Hamburg

Mikel

[Carl]

Very glad it helped. Really like the character you created.

You have been a great addition to our community and its a pleasure to offer some help in return!

 

Carl

 

 

[PointC]

19 minutes ago, Carl said:

You have been a great addition to our community 

 +1 to that comment.

 

@mikel - you've really been answering a lot of questions lately. The GreenSock community really benefits when more people jump into the mix. There are sometimes many paths to the same goal so seeing how other people approach a problem is always educational. Keep up the great work.

[Jonathan]

Hello @mikel  - Your doing a great job in the forum, thank you for all the support and help you give the GreenSock Team and the GreenSock Community