Jump to content


Repeating tweens with random duration

Go to solution Solved by Diaco,

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



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 comment
Share on other sites

  • Solution

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 comment
Share on other sites

Hi Diaco,


thanks for your support. Looks great.


Please, what is the problem in Part 03?


Kind regards


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