Jump to content
Search Community

Random (min,max) animation

mikel test
Moderator Tag

Go to solution Solved by Carl,

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

  • Solution

Nice demo ;)


The problem is that the randomNumber function will only return integers and with the values you are supplying only 0 or 1.


function randomNumber(min, max) {
return Math.floor(Math.random() * (1 + max - min) + min);

for (var i = 0; i < 100; i++){
  console.log("randomNumber =", randomNumber(0.5, 1)) // 0 or 1

take a look: https://codepen.io/anon/pen/wdgEgQ?editors=0011



Since Math.random() already gives a number between 0 and 1 and you're desired range is between 0.5 and 1 I would just use Math.max() to figure out if Math.random() returns a value greater than 0.5 like:

var scale = Math.max(Math.random(), 0.5); // get greater value

so if Math.random() is something like 0.01 you will default to 0.5


demo: http://codepen.io/GreenSock/pen/aWpawB?editors=0011




  • Like 4
Link to comment
Share on other sites


Here's a random function for decimal values...

function random(min, max) {
  if (max == null) { max = min; min = 0; }
  if (min > max) { var tmp = min; min = max; max = tmp; }
  return min + (max - min) * Math.random();


Just pass in your min and max, and it will return a floating-point value. If you pass in a single value, 0 will be the default min.

// This is the same...

// ... as this
random(0, 10);


But we can improve upon that. What about probability? Here you go. Just pass in a chance value from 0 to 100. If you want something to have a 30% chance of happening,it would look like this.

if (chanceRoll(30)) {
  // Do something...

function chanceRoll(chance) {
  if (chance == null) { chance = 50; }
  return chance > 0 && Math.random() * 100 <= chance;


And here's another handy function that will randomly choose a value for you.

var direction = randomChoice("moveUp", "moveDown");

function randomChoice(choice1, choice2) {
  return Math.random() < 0.5 ? choice1 : choice2;


Another thing I would suggest is to animate your x and y values separately. When you animate them together, it looks very linear. Here's how I do that. 

tweenProperty(carl, "x");
tweenProperty(carl, "y");

function tweenProperty(target, prop) {
  TweenLite.to(target, random(1, 6), {
    [prop]: random(100, 200), 
    ease: Sine.easeInOut,
    onComplete: tweenProperty,
    onCompleteParams: [target, prop]


Now it's time see all this in action. I really like your demo, but it looked like Carl was getting kind of lonely, so I invited his friend over, who goes by the name of Jack. Yeah, I know, but it's purely coincidental.


Watch as they play together. They like to see who can spin around the most times. It's latest fad, and all the cool bats are doing it.


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



  • Like 6
  • Haha 1
Link to comment
Share on other sites

Hi Blake,


It demands a broad vision of random, as well as a distinctive social competence to create such a pen. Hats off.
I assume C and J are dancing and not rotating due to the stress related to randomized bugs of browsers.


The next days I will study every line and will take the chance for exercises.
Thank you very much for the absolutely informative lesson.
And ...  rarely have I encountered so amusing and entertaining.


  • Like 1
Link to comment
Share on other sites

Did you make that graphic? I must admit that I lost a lot of time yesterday creating that demo. Not because the code is complicated, it's not. But because the more I tweaked the code, the more entertaining they became, almost like they had a mind of their own at times. Definitely one of the coolest things I've worked on all year.  

  • Like 3
Link to comment
Share on other sites

Hi Blake,


As a basic I found a batman illustration online, adopted that (Inkscape) and arranged the fittings for the wings.

In the beginning it was a joke for a friend.


I am proud that it is now an 'entertaining didactic play' for what kind of random ever.

You breathes life into it.


The luck of the draw ...


I thank you for the honour


  • Like 2
Link to comment
Share on other sites

  • 10 months later...

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...