Blog
- Animation in React - Uber Eats20 May 2020
- Animation in React - LiquidSwipe19 May 2020
- Animation in React - Tools - Part 210 May 2020 See all
Can it be done in React Web?

Chrome Tabs
Based on the iOS Chrome app, using React Spring.

Monzo Cards
Based on the Monzo mobile app, using React Spring.

Spotify Header
Based on the Spotify iOS app, using React Spring.

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

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

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

Tab Bar
Based on this design on UI Movement, using React Spring.

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
Based on this codepen. There are two implementations, one using pure CSS and the other using React Spring.

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.
Dream Bumps
Full stack Fantasy Bumps clone, with a React UI and a Spring backend.
What Should I Bake?
Full stack app for suggesting baking recipes, with an AngularJS UI and a node backend.
This website
Gatsby-based homepage with a little CSS animation for fun. Some design hints from the gov.uk design system.