Jump to content
Search Community

Rain effect using TweenMax

Damon Golding test
Moderator Tag

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

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

  • 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:

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 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.
×
×
  • Create New...