Jump to content
Search Community

GSAP 1.19 Random Property Between Two Numbers

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am sure this is possible, I am trying to get my x and y values to go between 100px and -100px from their starting points, but it seems to only honor the -100 value and move to random positions within that one range (0 to -100), and not my 100px value, which would position some in the opposite direction. My codePen should show what I mean.

See the Pen WxyyKG by celli (@celli) on CodePen

Link to comment
Share on other sites

Your range is actually 200 (because that's the distance between -100 and 100). So the way you wrote your random functions would always return a value between 0 and 100 instead of -100 to 100. Just change -100 to -200 in your function and you'll be golden:

//OLD: 
Math.floor(Math.random() * -100) + 100;

//NEW:
Math.floor(Math.random() * -200) + 100;

Does that help? 

  • Like 4
Link to comment
Share on other sites

One more question to add to this.

 

I wanted to get variation between each of the instances that my timeline fires, so that each time it plays the arrangement of the circles would be randomized. If I YoYo and repeat, it obviously would give me the same randomization that played the first time my timeline played.

 

Then I figured if I created two timelines and used an onComplete:restart then they would alternate, giving me a different random arrangement of my circles every time--it works the first two times it plays, for obvious reasons, but I guess when each timeline 'restarts' it actually remembers what the values were played the first time it played, even though it is random. How can I get it to play randomly each and every time ?

 

My codePen should also explain what I mean...

Link to comment
Share on other sites

My only two cents here would be to take Blake's great example and change alpha top autoAlpha. This way you can it can help with the performance of rendering in the browser.

 

http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/

  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

:)

  • Like 5
Link to comment
Share on other sites

Did you check out the

See the Pen JKkmdO?editors=0010 by osublake (@osublake) on CodePen

demo? Look at how you can use that function to set array based values, just like cycle.

TweenLite.set(".circlie", { scale: sample(scales) });

Setting some scales and colors. I think that's much cleaner.

See the Pen YWjARB?editors=0010 by osublake (@osublake) on CodePen

  • Like 5
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...