Repeating tweens with random duration

[mikel]

Hi,

 

thanks for your input and engagement in advance.

 

Part 01:     ok., but no random time.

 

Part 03: 

See the Pen yOerpb?editors=1010 by mikeK (@mikeK) on CodePen.

  random time super, but no animation of the tongue

 

Next: I want to synchronize the arm and the signs (part of svg).

 

What´s the best way to handle the animations?

 

Just for fun and an example that I love GreenSock:  

See the Pen qZbzdN?editors=1000 by mikeK (@mikeK) on CodePen.

 

 

Best regards from Hamburg
Manfred

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

[Diaco]

Hi mikel 

 

pls check this out : 

See the Pen grPVbE by MAW (@MAW) on CodePen.

 

you can simply use these methods : 

 

.duration() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/duration/

 

.timeScale() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/timeScale/

 

.repeatDelay() : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/repeatDelay/

[mikel]

Hi Diaco,

 

thanks for your support. Looks great.

 

Please, what is the problem in Part 03?

 

Kind regards

Manfred

[GreenSock]

The problem was that you were creating an overwriting tween for the autoAlpha of the mouth by always putting it at the 0 position on the same timeline. There are two solutions:

 

1) Just clear() the timeline before inserting new tweens.

 

2) In my opinion, there's no reason to be using a timeline in this situation, so you're better off just using simple tweens like this: 

function mouthOpen(){
  var time = [0.1, 0.1, 0.1, 0.2, 0.2, 0.2, 0.3, 0.4];
  var randomTime = time[Math.floor(Math.random() * time.length)];
  TweenMax.to("#mundZU02", randomTime, {morphSVG:"#mund02", repeat:1, yoyo:true, repeatDelay:0.02});
  TweenMax.to(".zunge", randomTime, {autoAlpha:1, repeat:1, yoyo:true, repeatDelay:0.02, onComplete:mouthOpen});
}
mouthOpen();

That'd perform slightly better anyway. 

 

Does that help?

[mikel]

Hi Jack,

Thanks for your input - its great also.

 

I like Diaco´s version and did the next step: 

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

 

Beste regards

Manfred