Jump to content
Search Community

Problem morphSVG, onComplete

mikel test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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



Link to comment
Share on other sites

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.to(".svgContainer", 0.5, {x:-200})
main.to(".svgContainer", 0.5, {x:0})


Check it out here:


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


  • Like 5
Link to comment
Share on other sites

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.


  • Like 5
Link to comment
Share on other sites

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