This Month on CodeSandbox - April 2021 Edition
Tags: codesandbox, community, animation
Published: 2021-04-28 15:58:13

---
title: This Month on CodeSandbox - April 2021 Edition
published: true
tags: codesandbox, community, animation
series: This Month on CodeSandbox
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjq7xlmcxeqa2o8cr1sh.png
---
Welcome to the first edition of This Month on CodeSandbox. This is a series where I'll be highlighting some of the amazing work being done by people in the community. As you can tell from the title, this will be a monthly series and, typically, the work I share will center around a certain topic or technology. I'll share work from CodeSandbox along with other platforms too. You can also find out what we've been working on so you can keep up to date with the CodeSandbox team.

This edition is all about animation. Animations are great because they can be created with a variety of different technologies like React and Three.js and they can take your design to the next level. Lots of people use CodeSandbox to create and share some really fascinating animations and it’s mind-blowing! Here are a few I've come across that I really loved.

## Community Spotlight


{% codesandbox 9cenu %}
[Playground](https://codesandbox.io/s/9cenu) by [Fabio Ottaviani](https://codesandbox.io/u/supahfunk) - This mesmerizing 3D animation was built with Three.js and react-three-fiber. Three.js and react-three-fiber together make building 3D animations in React applications possible. I'm already thinking of ways I want to use this in the future!


{% codesandbox nhndw %}
[Rotating Stars](https://codesandbox.io/s/nhndw) by [Twan Mulder](https://codesandbox.io/u/twanmulder) - This is the kind of animation that would make a great addition to a portfolio, blog, or even a product site. You can recreate this with just HTML and CSS so it's the perfect way to spice up a project.


{% codesandbox cell-fracture-forked-3rjsl %}
[Cell Fracture](https://codesandbox.io/s/cell-fracture-forked-3rjsl) by [Paul Henschel](https://codesandbox.io/u/drcmda) - This animation may seem deceptive at first glance. You only see the word "Hello" in simple black text. But click once to see "Hello" burst into colorful pieces. Cell Fracture was built with Three.js.

## Around the Web

{% youtube Xm4BObh4MhI %}
[12HR+ YouTube Coding Bootcamp 2021!](https://youtu.be/Xm4BObh4MhI) by [Ania Kubów](https://codesandbox.io/u/kubowania) - This isn't really related to animation. But I just had to share this. Ania created this free, 12-hour coding boot camp, all taught using CodeSandbox. She covers HTML, CSS, and JavaScript through project building. 

[Your First CSS Animation](https://www.thatsanegg.com/blog/your-first-css-animation/) by [Twan Mulder](https://codesandbox.io/u/twanmulder) - If you like "Rotating Stars" animation, then you'll really enjoy this article. Twan gives a step-by-step explanation of how to recreate his rotating CSS animation.

[A Dive Into React And Three.js Using react-three-fiber](https://www.smashingmagazine.com/2020/11/threejs-react-three-fiber/) by [Fortune Ikechi](https://codesandbox.io/u/iamfortune) - A few of the projects featured earlier were built using Three.js and react-three-fiber. If you're interested in learning more about these technologies, this is a great place to start.

## What We're Up To

These announcements aren't really related to animation. But I'm still very excited to share some of what we've been doing at CodeSandbox. 

This month, we launched two new podcasts - [Version One](https://codesandbox.io/podcasts/version-one) and the [CodeSandbox Podcast](https://codesandbox.io/podcasts/codesandbox-podcast). Version One dives into the product development journey of some really amazing online tools while the CodeSandbox Podcast focuses on members of the community and how they use CodeSandbox.

Episodes for both podcasts are released twice a month. So episodes one and two of Version One and the CodeSandbox Podcast are already available! Find the latest episodes below. 

{% spotify spotify:episode:3lIxK1Qbi5g0Z5ZBmOCic4 %}
{% spotify spotify:episode:3UZIORihk3z3jQdEYFkS2v %}