Jump to content
GreenSock

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

Random numbers on each new repetition

Recommended Posts

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

Link to post
Share on other sites

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.
  • Like 3
Link to post
Share on other sites

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,

 

 

Link to post
Share on other sites
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.

Link to post
Share on other sites

Cool! I can see the changes now.

 

Thanks a lot!

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

×