How to RepeatRefresh by triggering Restart?

[m4g1c14n]

So lets say I have an animation with random values, it animate properly

 

and then I wish to restart the animation at will , lets say when I clicked a button, but I want to restart the animation with Refreshed Random value 

 

I have tried setting the repeatRefresh to true, but apparently it is not working :(

 

Is there anyway of doing this easily?

 

Thanks a lot 

[mikel]

Hey @m4g1c14n,

 

Without seeing your case live - in a CodePen - it is not easy to help you.
Here's an example ...

 

See the Pen oNjoWGw?editors=0110 by mikeK (@mikeK) on CodePen

 

Happy tweening 

Mikel

 

[Carl]

repeatRefresh basically just calls invalidate() on your tween automatically.

 

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

so you can do

 

myTween.invalidate()

 

[m4g1c14n]

Here is the simple CodePen to illustrate

See the Pen QWjOYbV by m4g1c14n (@m4g1c14n) on CodePen

 

If you click restart over and over again ( slowly ), everything works , and the random value is refreshed, but if you trigger Pause , you can never restart it anymore ( except if you remove the invalidate() )

 

Also if you clicked on restart button over and over again in quick succession , it will treat as if target opacity no longer 1 and x no longer 0

lets say the opacity in the beginning = 1 and x = 0

if in the middle of animation you clicked restart ( with invalidate ), it will treat as if the target opacity is current opacity and x is current X ( which is definitely not opacity=1 and not X=0, because we are in the middle of animation )

 

So my take is, if we are doing invalidate, it will not only recalculate the RANDOM, but also the target current property >.<

 

so the question is how to invalidate ( which will refresh the random ), but still obey the initial state ( not current state where we may be in the middle of tween )? 

 

 

[Carl]

I made to changes to your demo to illustrate what is happening

 

1) I put a console.log("effect") in your registerEffect code

2) I changed the "from" opacity to 0.1

 

See the Pen eYpeoOV?editors=0011 by snorkltv (@snorkltv) on CodePen

 

Now you will see 2 things

1) registerEffect code is only run when the timeline is first created (as I'm pretty sure its designed to)

2) even after hitting pause the animation still plays, it's just that you couldn't see the circle because the opacity was 0. When it's 0.1 you can still see it move.

 

When you triggered pause(0) you were putting the playhead to the beginning where the opacity was set to 0 via the from tween. When you then invalidated your timeline there was no code executed that has anything to do with changing the opacity because that code is in your registerEffect function, which again, never runs again. 

 

The only thing that got invalidated was the tween in the timeline that was using the x value with the random values.

 

 

 

For your situation I'd recommend you explore creating a function that clears out your timeline and rebuilds it from scratch (to force registerEffect to run again).

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[OSUblake]

When you register an effect, use extendTimeline: true to simplify your timeline code.

 

gsap.registerEffect({
  name: "moveFrom",
  extendTimeline: true,
  defaults: {
    x:"random(-100,100,1)", opacity: 0.1
  }, effect: ( targets, config ) => {
    console.log("effect")
    return gsap.from( targets, config );
  }
})

 

Simpler!

tl = gsap.timeline( {repeatRefresh: true, repeat:0} );
tl.moveFrom(".circle", { x: "random(-500,500)" })

 

[Carl]

Also keep in mind that from() tweens animate from the position you specify to the current values.

If you have a tween that gets a random start value and it happens to be  -500 and you pause(0) you are putting the object at x:-500 if you then invalidate the tween and get a new random start value you are going to animate from the new random start value to -500. This is why pressing pause makes the object always end up in a different position.

 

 

[m4g1c14n]

Thanks a lot for the explanation, @Carl @OSUblake

 

So in the end I just make sure that tl.progress() == 1 before I invalidate  , and then I can invalidate and then reverse them

 

 

[Carl]

Yeah, that sounds like it could resolve some of the issues.