Realistic Snow Falling Animation With jQuery And GSAP

In this tutorial I will be showing you how to do a realistic falling snow effect with the combination of jQuery and GSAP's TweenMax library.

What we are going to create is an animated snow flurry or snow shower--a typical random weather scene that appears when we look at a window during the winter season. 

How to use it:

1. Create a container element on which the plugin renders the snow falling animation.

<div id="snow-animation-container"></div>

/* example CSS */
#snow-animation-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

2. Load the required jQuery and TweenMax.js libraries (for fast and smooth animations) in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/TweenMax.min.js"></script>

3. Download the package and insert the main script script.js after jQuery. That's it.

<script src="script.js"></script>

4. Config the snow falling effect.

• MAX_SNOW: maximum number of snowflakes to generate
• MAX_SNOW_SIZE: maximum size of snowflakes
• MAX_SNOW_SPEED: maximum animation speed in seconds

var MAX_SNOW = 200;
var MAX_SNOW_SIZE = 7;
var MAX_SNOW_SPEED = 1;

---

This awesome jQuery plugin is developed by moblamobla. For more Advanced Usages, please check the demo page or visit the official website.