Jump to content
Search Community

Random values on each repeat, but same for all elements

Schweinedog test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi, so I thought I understood how randomizing values works, but turns out again I know nothing!

See my codepen. I want to achieve an effect similar to the left, so all those lines tween the same amount. That, but with random values instead of a hardcoded 'cycle' of tweens.

So what I have on the right was my attempt at randomizing, but (for me) unexpectedly, the random function fires once for EACH queried line instead of generating one random value for all the queried lines for each repeat... Where is the flaw in my logic? And how can I achieve what I'm after?

Thank you in advance for your help, it is much appreciated!

Kindest Regards,

Simon

See the Pen yLVBLWY by saiminh (@saiminh) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Schweinedog. Thanks for supporting GreenSock with a Club GreenSock membership!

 

A few notes:

  • You don't need the new keyword when creating timelines.
  • You might benefit from GSAP 3's defaults functionality.
  • You might benefit from GSAP 3's random functionality (don't have to write your own).

As for your question, since in this case you want a different random value for each repeat but not each target, I'd probably make use of the onRepeat callback along with some variables like so:

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

  • Like 4
  • Thanks 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.
×
×
  • Create New...