Brief Intro

In August I created a Pen animation based on a Dribble illustration by artist Razvan Vezetue. I was able to bring his Floating Island Illustration to "life" not just through CSS animations but by also utilizing the random() function in SASS.

Initial Set Up

The illustration contains multiple clouds and water drops, to maintain my code DRY I used the @for directive in SASS to loop through each .cloud-i and .drop-i class.

  .cloud{
  stroke-linejoin:round;
  //loop through each cloud
  @for $i from 1 through 8 {
     &-#{$i} {
      //animation shorthand( animation-name, duration, timing-function, delay, iteration-count)
        animation: moveRight 10s linear 1s infinite ;
    }
  }
}

Initial Result

I wrongly assumed that because each cloud and water droplet had their own location, that adding the same animation property to each class would be enough. I had different size clouds and water droplets moving at the same speed and well...the animation looked "stiff". BLEH...

I wanted to bring "life" to the animation which meant creating the impression that each element on the page had it's own "weight" and thus was moving at a different speed. I was trying to maintain my code DRY by using the @for directive on each .cloud-i and .drop-i class that the last thing I wanted to do was get rid of it and start over. I did not want to create/add an individual animation property for each element and so I solved my own problem... the random() function!! SASS 3.3 provides us with a native random() function that can be used with CSS properties but I never thought of using it with animations.

First fix

I used the random() function on the animation-delay property first to try it.

  animation: moveRight 10s linear infinite #{random(7)}s;


Result:

This gave each .cloud-i class an animation-delay anywhere from 1-7 seconds

  .cloud-1 {
  -webkit-animation: moveRight 10s linear infinite 6s;
          animation: moveRight 10s linear infinite 6s;
}
.cloud-3 {
  -webkit-animation: moveRight 10s linear infinite 2s;
          animation: moveRight 10s linear infinite 2s;
}
.cloud-5 {
  -webkit-animation: moveRight 10s linear infinite 4s;
          animation: moveRight 10s linear infinite 4s;
}

//etc...

But...

This created another problem, the delay between cloud elements would be anywhere from 1-7 seconds. I wanted to reduce the animation-delay to at-least 0.5 seconds so I used the (/) operator with the random() function to reduce the delay from 1-7 seconds to 0.5-3.5 seconds. I also used the random() function on the animation-duration property. This gave each cloud element more freedom.

  animation: moveRight #{(random(7)/2)+ 8}s linear infinite #{random(7)/2}s;

Result:

  .cloud-1 {
  -webkit-animation: moveRight 9s linear infinite 2s;
          animation: moveRight 9s linear infinite 2s;
}
.cloud-3 {
  -webkit-animation: moveRight 9s linear infinite 3s;
          animation: moveRight 9s linear infinite 3s;
}
.cloud-5 {
  -webkit-animation: moveRight 8.5s linear infinite 0.5s;
          animation: moveRight 8.5s linear infinite 0.5s;
}
//etc..

Ahh finally

I finally added the random() function to the water droplets

  .drop{
  stroke-linejoin:round;
  //loop through each drop
  @for $i from 1 through 8 {
     &-#{$i} {
     //scss random function to the duration of the animation and the delay
      animation: fall #{(random(5)/2) + 1}s linear infinite #{random(5)/10}s;
    }
  }
}


Final Result:

Conclusion

Combining the random() function in SASS with CSS animations gives you the ability to provide each individual user with a unique animation when they click/hover on any element on your website.


472 0 15