evalarumbe / sparkles

Animated sparkles on HTML5 canvas with GSAP

Sparkles

Goal

Decorate a canvas element with animated sparkles.

Useful links

Code example showing how GSAP and canvas code talk to each other

Many possible TODOs

• Play nice with other elements on the page

  • Clear the sparkles with transparent pixels (instead of solid ones), so we can overlay sparkles on another element. Maybe with clipping paths... or maybe with globalAlpha.
  • Allow sparkles to overlap the edges of underlying element (generate center points within element boundary, but let the shape stretch past it)
  • Make it a 3D orb

• Interactivity

  • If cursor moves off screen, dim all sparkles
  • Respond more elegantly to resize

• Place sparkles more intentionally

  • Make them appear in a wave across the canvas (vertical, horizontal or diagonal...)
  • Place sparkles so they don't overlap
  • Set number of sparkles based on viewport size (not too many, not to few)

Unsolved mysteries

• Bugs on mouse over:
  • animation pauses for dim sparkles
  • sparkling all syncs up, but I wanted them separate like they are at load (perhaps something to do with delay?)