Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Repeating tweens with random duration

Recommended Posts



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

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

Link to post
Share on other sites

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/

  • Like 6
Link to post
Share on other sites

Hi Diaco,


thanks for your support. Looks great.


Please, what is the problem in Part 03?


Kind regards


Link to post
Share on other sites

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});

That'd perform slightly better anyway. 


Does that help?

  • Like 3
Link to post
Share on other sites

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


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