Jump to content
Search Community

MorphSVG partial ?

mikel test
Moderator Tag

Go to solution Solved by PointC,

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 guys,

 

Is there a way to run morphSVG partial like drawSVG:"40% 60%" ?

 

I want to randomize different "parts" of a morph (!?).

 

Here just an example:

 

Kind regards

Manfred

 

P.S. This pen might be a persiflage.

But it is definitely the truth and not a fake code!

Relations to living persons are obsolete.

See the Pen WRBKrd by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

Hi mikel :)

 

MorphSVG doesn't have percentages like DrawSVG, but you can do something similar by tweening the progress of the timeline. 

// create the morph timeline as usual
var tl = new TimelineMax({paused:true});
tl.to(startPath, 1, {morphSVG: endpath, ease:Linear.easeNone});

// then tween the progress of the timeline
TweenMax.fromTo(tl, 1, {progress:0.4}, {progress:0.6, ease:Power3.easeInOut})

Hopefully that helps.

 

Happy morphing.

:)

  • Like 4
Link to comment
Share on other sites

Hi PointC,

 

Sorry for my late response. But Charly was theething.

 

Seriously: Thanks for your smart alternative.

 

My experience is not so good. but I tried a revised pen: 

See the Pen RKzarv by mikeK (@mikeK) on CodePen

 

Random duration is ok, Randomizing the progress value seems to be complicated !?!

 

Plus: How to use this SPEAKING tween in a main tween together with other actions?

With individual repeats.

 

Little help from my friends would be great ...

 

Best regards from Hamburg

Manfred

Link to comment
Share on other sites

Hi Manfred :)

 

Are you going to be syncing audio with the mouth movement or is this just some random mouth moves while the audio plays?

 

If it were me, I'd probably cut the tween time in half and add a yoyo with a single repeat to your fromTo() progress tween. That will close the jaw instead of snapping to the next position. That's just my two cents worth though.

.fromTo(charly, 0.5, {progress:0}, {progress:open, yoyo:true, repeat:1})

Adding a repeating tween in the middle of another timeline can be accomplished in a few ways. You could add it to a function and call it when needed, add a position parameter label or use recent(). We had a good thread about infinite animations in timelines here:

 

https://greensock.com/forums/topic/13717-infinitly-repeating-tween-stops-timeline/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Hi PointC,

 

At the end there should be a small talk - something like this: 

See the Pen evYbXo by mikeK (@mikeK) on CodePen

 

Handling duration and morph progress with random factor should express it more naturally.

 

The result with "yoyo:true, repeat:1" is still not working - progress don´t run with random figures.

 

Best regards

Manfred

Link to comment
Share on other sites

  • Solution

Thanks for that extra link. Now I think I see what you're going for here.

 

I think a fromTo() that tweens the progress in a function should work well. At the end of each tween, we'll repeat the function until we reach the maximum mouth movements. Here's what I used:

function morphLoop() {
  count++;
  if (count < moves) { 
    var open = randomNumber(0.2, 1);
    TweenMax.fromTo(charly, 0.12, {progress:0}, {progress:open, repeat:1, yoyo:true, ease:Sine.easeInOut, onComplete:morphLoop})
  }
}

Here's a fork of your pen.

 

See the Pen ZeYEqX by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweening.

:)

  • Like 2
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...