Jump to content
GreenSock

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

TimeLineMax won't play tweens with recursive call

Recommended Posts

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:


 

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

  • 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.
×