Jump to content


SVG rain efffect

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

Here is what I want to do: Take a look at the vector art here and note the rain. I have converted the image to SVG and and now wish to animate the rain (in this example 109 raindrops) straight downward (no wind, etc.) . A requirement of the project is that the animation be respectful of the artist's placement of and distance between raindrops. Using JS Math.random functionality to randomly place the raindrops doesn't seem to be the best option. 


Here is my initial plan: Group the 109 raindrops together in Illustrator and then create a copy. Animate these two groups in the SVG to create a rain effect.


What I've done so far: I wanted to test an simple proof of concept that I could build on so I created the following Codepen. Here I created two groups of ellipses (1 for each group of raindrops). As you can see, using positioning, I am able tween second group right after the first. While I realize that the 2s space between the tweens is caused by a combination of a 4s tween duration and a "=-2" position parameter, I can't figure out how to remove it. 


What I am asking: Could you point me to some DOCS that might be useful?


As always, thank you.


Also I was playing around with DrawSVG and MorphSVG. Love it and must have. Do you offer any coupons? 

See the Pen MEJmpr by gmw (@gmw) on CodePen

Link to comment
Share on other sites

Hi @gmw :)


If you're just using two copies of a seamless pattern, this can be achieved quite easily. Here's a basic example using a .png as a background for two animating divs, but the same thing can work for two groups in a SVG. 


See the Pen XepzLX by PointC (@PointC) on CodePen

You can also search the forum for 'seamless' or 'seamless loop' and you'll find several threads that may also prove useful for your project.


Hopefully that helps. Happy tweening.


  • Like 4
Link to comment
Share on other sites

An easy way to create a seamless loop is to use a negative delay.


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


Not what you want... or is it? The animation is only 2 lines of code. Look what happens when I get rid of the x movement and randomize the delay instead of the duration. 


// TweenMax.to(snowflake, random(1, 10), { x: "-=200", repeat: -1, yoyo: true, ease: sine });
// TweenMax.to(snowflake, random(1, 8), { y: h + 100, ease: linear, repeat: -1, delay: -15 });
TweenMax.to(snowflake, 6, { y: h + 100, ease: linear, repeat: -1, delay: random(-15) });


I used a random value, but you can use a step value to evenly space your drops out.


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



  • Like 6
Link to comment
Share on other sites

Wow! What amazing answers!


For this particular project, @PointCpen gave me exactly what I was looking for. All I had to do was swap in the SVG groups for the PNG files and I was good to go. Thanks @PointC!!!  For anyone who is interested, check out this

See the Pen jGyBLP by gmw (@gmw) on CodePen




The realism in @OSUblake's blows me away!!! Thanks @OSUblake!!!


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