Swift Playgrounds, Learn to Code 3

Learn to Code for Swift Playgrounds was an incredible project to be a part of. Together with a team of many, we were able to create an educational coding experience that proved engaging for kids and beginners, all over the world. I was tasked with the animation for cutscenes—2D animated assets that served as an intro to each coding lesson. Below are some examples from Learn to Code 1, 2, and 3 as well as some thought/process that went into the animations. Initial character discovery was created using After Effects—The final artwork was created using other means, to offer a richer accessibility and localization experience.

Story boarding

After every meeting and before animating a cutscene I would map out how I thought the scene might take place. Below is an example of one storyboard that involved our raindrop character Blu, in space.

Animation Tests

Here's a few test animations that I ran, while story boarding with writers and engineers. Seeing how some of the characters and props moved helped the group to better visualize each slide of the cutscene.

Cutscene Asset Creation

Planetary asset pack for Learn to Code 3.

Icecream maker asset pack for Learn to Code 3.

Character Animation

When exploring the 2D characters for Learn to Code, it was important for me to understand how they'd move within each Cutscene. I decided to add props and create mock-ups in After Effects to use as reference. Here is an asset that was not used in final compositions but proved valuable in understanding Byte's persona and body language.

2D Blu Test Animation: Here's a test animation used for Blu's character. This animation would be shown once a user had completed their first Learn to Code lesson. — **2D Blu Test Animation:** Here's a test animation used for Blu's character. This animation would be shown once a user had completed their first Learn to Code lesson.

Byte 2D Character Skeleton: Simple skeletons helped further understanding of how Byte interacted with props. — **Byte 2D Character Skeleton:** Simple skeletons helped further understanding of how Byte interacted with props.

Prop 2D Skeleton: I then applied a similar skeleton inside of After Effects to determine a specific range of movement for the banjo string playing actions. — **Prop 2D Skeleton:** I then applied a similar skeleton inside of After Effects to determine a specific range of movement for the banjo string playing actions.