Jump to content

Damon Golding

Rain effect using TweenMax

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 trying to create a rain effect using TweenMax. I have a solution (see my codepen), but I just wanted to know if there was a better way of achieving this?


Any thoughts, feeling or advice would be appreciated.



See the Pen aWpOQP?editors=0110 by damongolding (@damongolding) on CodePen

Link to comment
Share on other sites

Hi Damon Golding :)


Welcome to the GreenSock forum.


I think what you're doing there looks fine. If you'll be using lots of elements like that or maybe particles, you'll probably find canvas to be a better option. Check out this snowflake demo from our resident genius Blake:


See the Pen BjNZYP by osublake (@osublake) on CodePen


Again, what you've got is fine, but you'll start hitting limits with regular DOM elements or SVGs. Take a look at PIXI (http://www.pixijs.com/)when you get a chance. That's what Blake is using in that demo. Others may offer additional thoughts and advice, but my vote would be to use canvas.


Happy tweening and welcome aboard.


  • Like 4
Link to comment
Share on other sites

Yep, what you're doing is fine, although you'll likely get better performance if you animate "y" instead of "top" because transforms don't affect layout thus repaints are cheaper. 


PointC's comment is right-on; a canvas-based solution (like Pixi.js) will almost always be faster for things like this (performance-wise, not kb-wise or time-to-build).


Happy tweening!

  • Like 3
Link to comment
Share on other sites

Thanks for the comments guy, much appreciated!


I did think about canvas but I was trying to avoid as I'm not a huge fan  :-P. I might give it a try though using 'y' instead of top seems to be working lovely.


Thanks again guys  8-)

  • Like 2
Link to comment
Share on other sites

  • 3 years later...

Well... this is an old topic, but I guess you can get a rain like effect using sprite animation. Just like old video games with a tile-able image.

I couldn't find any available sprite online, but something like this:



It depends on the styling of your animation if it could work, but it might be an easy hack for "a lot of particles" (or none at all actually) without a canvas

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