Optimize Large Number of Animated Elements

[jwymer 1 Likes (Newbie)]

Hi there,

 

I'm new to greensock and am creating a holiday card which consists of an increasing number of snowflakes falling down the screen. The goal is to achieve a "snowed out" effect that will transition into a white background. As the number of moving elements increases, the animation gets laggy when the snowflakes are being generated(understandably). Currently, the animation is being timed by a large block of delayedCall, which doesn't seem ideal to me, and the snow is being generated by appending div elements using a for loop.

 

My questions are:

 

Is there a better way for me to call my snow functions other than a bunch of delayedCall?

 

and 

 

Is there a better way for me to generate the snow in place of the for loop to achieve the same effect?

 

Thanks!

See the Pen VmmWRp by jwymer (@jwymer) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Yes and yes.

 

If you can, you will be better off by using Canvas, it will give you a much better performance compared to hundreds of DIVs.

 

There are a few ways to generate the snowflakes in a more efficient way. One would be to create a loop to generate the delayed calls offsetting the delay on each iteration. Another one would be to have an empty tween that repeats itself X number of times, each time it repeats, it calls the generate snowflake function and at the end of it, it can call another tween to white-out everything and remove the snowflakes.

 

Both are simple ideas and should be easy to implement, just bear in mind they do nothing to improve the speed of it. You will need to use Canvas for that. Or try to reduce the amount of flakes to a level that you find acceptable and gives you smooth results.

[Carl 9,066 Likes (Superhero)]

Great tips from Dipscom.

 

To see the performance of canvas look what Blake did with snow: http://codepen.io/osublake/pen/BjNZYP (12,000 flakes)

[jwymer 1 Likes (Newbie)]

Thanks for the tips, Carl and Dipscom! I'm currently implementing canvas as suggested and it appears to be running much more smoothly.

[fripi 10 Likes (Newbie)]

Hi,

 

I would love to use Carl's solution in a banner, but pixi js isn't a DoubleClick hosted JavaScript librarie,

so is it still possible without pixi? I really don't know much of canvas

[OSUblake 9,990 Likes (Superhero)]

What's your file size limit? Pixi is kind of a heavy library. And speaking of Pixi, I've been meaning to post this for you banner people. You can now export to Pixi from AnimateCC.

https://creative.adobe.com/addons/products/14345#.WJHeEF_QeUm

 

You don't necessarily need Pixi for that, but it might be hard to animate all those snowflakes without it. How big is your banner and how many snowflakes do you think you might need? You could probably do a couple thousand without any noticeable performance problems. You can play around with the total value on line 18.

.

[Dipscom 2,815 Likes (Superhero)]

And speaking of Pixi, I've been meaning to post this for you banner people.

 

We, the banner people! HA! I'll see you after school you fish murderer.

[PointC 8,599 Likes (Superhero)]

I'm pretty sure I saw that episode:

 

Doctor Who vs. The Banner People

[OSUblake 9,990 Likes (Superhero)]

What do you mean "You People?!?" 

 

 

I don't know why I said it like that, but I kind of like it.

 

 

#TheBannerPeople

.