Jump to content
Search Community

Feedback requested on site animation

CFMDeveloper 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

Hey everyone,



I recently put together a nifty little site for a local event in town and (of course) I utilized Greensock in my project.


I took a demo that I had found and tweaked it so I could create the snowfall effect seen in the hero/background. 



However, I've noticed that it seems like its slow (performance wise) on certain devices and its gotten me thinking that maybe I can optimized the performance to insure a steady 60fps framerate (as consistently as possible). 



The codepen URL I provided shows the original fork example I created. 



Here is the live website where this code was implemented (sans the transform: scale() on the <div id="snow"></div> element):





Any and all feedback would be most appreciated. Thanks!

See the Pen NNVPPj by iansvo (@iansvo) on CodePen

Link to comment
Share on other sites

Oh, so now it snows in Jacksonville during the Christmas season?  :lol:


I think you can improve performance by using sprites instead of round divs. Even better would be to use sprite sheet animation for the opacity since that can be an expensive operation to calculate on the fly. Here's an example of what a sprite sheet like that would look like.





When people see how all those fancy DOM and SVG based animations you see on CodePen have a tough time being rendered on mobile, my response is almost always the same, use canvas. Pixi.js is a good canvas library to use because it uses WebGL, which is even faster. That's what most HTML5 mobile games use for the renderer.


There's even a thread on this forum about using Pixi for snow.



12,000 snowflakes - 24,000 tweens...

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

  • Like 5
Link to comment
Share on other sites

Blake, I've tested your "Christmas Snowy Pen" on an iMac5K 4GHz i7/32GB/4GB M295X GPU:
150.000 snowflakes fall down nicely as well! Although at a 500.000 snowflakes blizzard you can't see the mountains anymore and Firefox starts to dislike being responsive at screen resize :P

Cooooooool Pen!

Link to comment
Share on other sites

Although at a 500.000 snowflakes blizzard you can't see the mountains anymore and Firefox starts to dislike being responsive at screen


Ah yes, the old "Why aren't my animations responsive when I animate half a million different things?" We get that question a lot.  :lol:


I'm reinitializing everything on a screen resize, so that's 1 million tweens being created. I didn't optimize it for that many different things, but Pixi can render a million different things without breaking a sweat...


One Million Bunnies!



I just posted a different snow version in that other thread...

See the Pen 58dbb70181ba66efc7611e150743a5e2?editors=0010 by osublake (@osublake) on CodePen

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