TimeLineMax won't play tweens with recursive call

[tusha3]

Hi guys,

 

I'm trying to capsule a random infinite wiggle effect inside a timeline, so I will be able to easily pause and play it on specific events.

This is the first time I use a timeline, so I probably doing something wrong, but I can't figure out why the timeline (named wiggleTween) is not working properly (smooth infinite animation)...

 

Any help will be highly appreciated, thanks ahead!

 

Here's the codepen:

 

I have used this wiggle example as the base code for the wiggle animation:

https://greensock.com/forums/topic/9352-wiggle-effect/

 

I also used scrollmagic.io for the other timeline (which works, I don't think it has nothing to do with the problem I'm having).

 

Thanks again,

Neta

See the Pen KWpdoV by tushal3 (@tushal3) on CodePen

[Dipscom]

Hi Neta, 

 

I can't really visualise what movement you are trying to achieve so, not sure what to suggest. Part of the reason you are having problems is that you are trying to add more tweens to you timeline on complete. If you want your animation to repeat itself, you just need to tell it to play again, rather than adding more tweens to the end of it.

var wiggleTween = new TimelineMax({repeat:-1});

If you want to get rid of the previously created animation then, you need to overwrite the whole animation

function wiggleProp(element, prop, min, max) {
  var duration = 1//Math.random() * (1.6 - .8) + .8;

  var tweenProps = {
    ease: Power1.easeInOut,
  };
  tweenProps[prop] = Math.random() * (max - min) + min;

  wiggleTween = new TimelineMax({onComplete:wiggleProp, onCompleteParams:[element, prop, min, max]);

  wiggleTween.to(element, duration, tweenProps, 0);
}

But, the latest version of GSAP has a CustomWiggle (and a CustomBounce) that you might find super useful since you are trying to achieve a wiggle effect.

[tusha3]

Hi Dipscom, thanks a lot!

 

the movement I am trying to achieve is like in this example:

See the Pen hHegc by jamiejefferson (@jamiejefferson) on CodePen

 

The new wiggle feature is awesome, but I am not sure if it'll fit in this case.

 

I haven't used repeat: -1 because I want to have different random numbers to each tween.

 

Do you have maybe a different idea to get the random wiggle I want inside a timeline?

and if a timeline is not possible in this case: Is there any elegant way to pause/play this kind of wiggle?

 

Thanks!

[Dipscom]

If that is the case, you want to create a function that creates a new timeline every time. Then call it whenever you want it to trigger. By creating a new timeline every time, you can make use of the CustomWiggle.

 

Look at the second code snippet on my previous response. Add the CustomWiggle there and you should be fine.