I wanted to share our experiences using different libraries on our card games site. Through a mix of original programming, refactoring, and using some open source libraries, we've had the benefit (or curse!) of learning of multiple different ways to animate our card games. I wanted to quickly review the different methods we've tried.

Handwriting Canvas animations

I wrote about our handwritten animations before, but suffice to say what you gain in control you also lose in tediousness. Here's a brief list of Pros & Cons:

Pros:

• Control animations exactly as you want
• Depending on the path you take, can be a much more efficient approach to animations. For example, Firefox generally has a less performant animations, so efficiency is key. Try opening our handwritten Solitaire game in FireFox, and then our GSAP-based FreeCell game. In our case, the handwritten approach is loads more fluidly than GSAP (although this could be our approach to GSAP). We decided to continue with GSAP because most of our users are on Chrome, but it's something to keep in mind.

Cons:

• This can be incredibly tedious, especially for more sophisticated animations, involving lots of window.requestAnimationFrames, counting, and event dispatching.

GSAP

After writing our first games by hand, I discovered GSAP. GSAP makes complex animations easy, and allows you to precisely control how your animations unfold. As mentioned earlier, our FreeCell game is written in GSAP.

Pros:

• Easy to write complex animations
• Works with canvas, but also HTML, SVG, and CSS elements.
• Large developer community

Cons:

• External library must be loaded
• Animating many elements can appear slower in slower browsers (although to be fair, I'm new to GSAP so this could be my problem)
• Features you really want to use, like modifying the bounce ease, are premium (but the $ is relatively low).

Phaser

To augment our primary games, we used an open source library to launch a longer-tail of card games. These card games use Phaser as the gaming engine. Phaser is basically a fully featured gaming engine that can run tons of different kinds of games, and has a built in physics engine. If hand writing code is walking, and GSAP is driving a car, Phaser is like the SpaceX Starship. But just like the Starship, there's also a cost.

Pros:

• Fully featured animations and gameplay engine

Cons:

• Definiitely more intense on the CPU/GPU. Loading one of our games, like Pyramid, can take a while, and if you leave your computer open your CPU fan will start spinning. Over time, your browser will slow down.
• In our case, we're working on updating / downgrading our Phaser games to GSAP. While Phaser is great, it may be overkill for our product.

That said, There are tons of other gaming engines out there that can be used. Would love to hear what the community uses.