Jump to content
mikel

Problem morphSVG, onComplete

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
Mikel

 

 

Share this post


Link to post
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.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

 

  • Like 5

Share this post


Link to post
Share on other sites

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

  • Like 4

Share this post


Link to post
Share on other sites

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

 

 

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 :)

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.