Blog

  1. Animation in React - Uber Eats20 May 2020
  2. Animation in React - LiquidSwipe19 May 2020
  3. Animation in React - Tools - Part 210 May 2020
  4. See all

Can it be done in React Web?

Chrome Tabs

Chrome Tabs

Based on the iOS Chrome app, using React Spring.

Video on YouTube - Code

Monzo Cards

Monzo Cards

Based on the Monzo mobile app, using React Spring.

Video on YouTube - Code

Spotify Header

Spotify Header

Based on the Spotify iOS app, using React Spring.

Video on YouTube, Update - Code

Liquid Swipe

Liquid Swipe

Based on the Cuberto Liquid Swipe demo, using React Spring and masking.

Blog post - Code

Uber Eats

Uber Eats

Based on the Uber Eats mobile app, using React Spring.

Blog post - Code

Octopus Text

Octopus Text

Based on the Octopus Cash website, using pure CSS with keyframe animation.

Video on YouTube - Code

Tab Bar

Tab Bar

Apple

Apple

Based on the this gif from an old version of the Apple website. Using CSS, with transitions and keyframes, along with React Transition Group.

Menu

Menu

Based on this codepen. There are two implementations, one using pure CSS and the other using React Spring.

Hopyard

Hopyard

Based on the Hopyard website, using pure CSS with hover transitions.

Other Projects

Tasks

Trello-like app designed for using offline and without collaboration (for when you can't use cloud tools). Using Electron and react-beautiful-dnd.

Code

Dream Bumps

Full stack Fantasy Bumps clone, with a React UI and a Spring backend.

Code

What Should I Bake?

Full stack app for suggesting baking recipes, with an AngularJS UI and a node backend.

Code

This website

Gatsby-based homepage with a little CSS animation for fun. Some design hints from the gov.uk design system.

Code