Random numbers on each new repetition

[Pata]

Hi there!

 

I'm trying to repeat a timeline with different random numbers values on each repetition. (On the circles staggering)

 

It seems it is working but the first tweens are not repeating.

 

.to(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'})

 

If I change the "to" for a "from" it works.

 

.from(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'})

 

Is this the best way to do it?

 

Thanks in advance,

See the Pen NWGqEgX by pataduprins (@pataduprins) on CodePen.

[ZachSaucier]

Hey pata. I think you're looking for the repeatRefresh feature  Here's how I'd set it up:

See the Pen bGVdQzK?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Side notes:

• GSAP has built in random functionality!
• You don't need to add units to your values for the most part.
• You should use a position parameter of 0 to start animations all at the start (no need for relative offsets for that). But if you do use relative offsets, I recommend using "<" instead. For more information check out this post:
• It's best to use .fromTo()s if you want different values each time. That way it doesn't use the end values from the previous iteration.

[Pata]

Hey Zach, thanks for the fast answer.

 

I really appreciate your tips but on your solution I just can see the same circles movement on each repetition. No new random numbers seems to be generated.

 

Maybe we are missing something?

 

Thanks,

 

 

[ZachSaucier]

4 minutes ago, Pata said:

I just can see the same circles movement on each repetition. No new random numbers seems to be generated. Maybe we are missing something?

That's because the animation is so fast and the values are similar to each other (I was trying to generate ones similar to the ones that you had). Just change the range to something like -400, 400 to see that it is indeed working.

[Pata]

Cool! I can see the changes now.

 

Thanks a lot!