Building a Snow Globe with GSAP

The festive season is upon us, and I wanted to get stuck into some creative coding, so I figured why not combine the two?

I’ve been a long-term supporter of GSAP, pretty much since its inception, so it’s always my go-to animation library. I liked the idea of framing a small scene, and a snow globe felt like the perfect choice. But what scene? Growing up in the late 80s/90s, there were so many quality cartoons, but one I always loved (aside from TMNT, of course) was SpongeBob SquarePants. And Gary the Snail is the real OG, so he was always going to be the star of this, right next to the pineapple house.

The first thing I did was dive into Google, grabbing some images to reference. Usually I’ll trace these images in some design software. I normally prefer Illustrator for my SVG work, but I thought I’d give Figma another try.

A screenshot of a vector tracing of Gary the Snail in Figma, drawn over an underlying reference image (indicated by the tracing process).

Luckily these vectors don’t need to be perfect, so Figma was more than fine for this task. As a habit, I always run exported SVGs through Jake Archibald’s SVGOMG tool hosted here.

Next I looked for some GSAP inspiration. The forums have always been great for this, alongside loads of demos to be found on CodePen. I wanted a particle emitter for the snowfall, and a pointer-aware animation so it feels like you’re actually moving the globe. These two stuck out to me as good starting points:

From here it’s just breaking down the examples, understanding how they work, and then planning my own build. I try to keep all the timelines separate so I can piece them together later, which gives me better control overall.

Ultimately, this isn’t production code, it’s just a bit of fun, so it’s fine if things aren’t quite perfect. And this is far from perfect!

ta-da

See the Pen GSAP Snow Globe - SpongeBob SquarePants by Leanne (@leannerenard) on CodePen.

Future plans

Given more time, I plan to:

  • Use container queries to make it fully responsive.
  • Refactor to use the GSAP Draggable plugin rather than a button to shake the snow globe.
  • See if there are any ways to make this more performant.

More inspiration

I’ve always loved SVG animation, and if you do too, here are a few more people worth checking out:

Happy Holidays!

P.S. Check out the SpongeBob flower/boat propeller sky theory here.

back