Jump to content
GreenSock

jwymer

Optimize Large Number of Animated Elements

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

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.

.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

I'm pretty sure I saw that episode:

 

Doctor Who vs. The Banner People

  • Like 1
Link to comment
Share on other sites

What do you mean "You People?!?" 

 

 

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

 

 

#TheBannerPeople

.

  • Like 2
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.
×