Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Damon Golding

Rain effect using TweenMax

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 post
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 post
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 post
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 post
Share on other sites

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:

9b9817e03b3a86cc95d4fd9f5c784557.gif

 

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

×