Codepen: Live code editing

Codepen, code jams online

*Your mobile experience may vary*

Codepen is a great place to find and experiment with incredible code creations. The above example uses the Greensock (GSAP) javascript library for insane animation power (press your mouse on the bees to spawn more).

This looks like something that could make browser games handle thousands of objects with grace, and not reducing a device into a bubbling pool of molten metal. It’s very slick, and well worth heading to their active and helpful forums to get more advice (or try it yourself – it’s free to use).

Codepen is a personal favourite for finding something unique to impress site visitors with. Lots of neat effects, and places to work out issues (Lots of Masonry tricks on there). We used codepen to debug and refine the code for cards, and saves time dragging code into you running projects.

Personal experience

I hoard Codepen links in my Trellos. I usually go looking on Codepen if I need something fantastic to incorporate into a site. I’ve used many of the neat css animations that can be easily edited to create fancy features.

Use cases

Need a unique code solution to impress your geeky friends or clients.


Your site can end up bloated with scripts, and probably won’t be cross platform compatible.