https://github.com/aholachek/react-stripe-menu

A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit
https://github.com/aholachek/react-stripe-menu

animation demo flip popmotion react stripe styled-components ui

Last synced: 13 days ago
JSON representation

A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit

• Host: GitHub
• URL: https://github.com/aholachek/react-stripe-menu
• Owner: aholachek
• Created: 2018-05-14T19:43:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:03:43.000Z (almost 2 years ago)
• Last Synced: 2024-10-16T18:31:24.139Z (27 days ago)
• Topics: animation, demo, flip, popmotion, react, stripe, styled-components, ui
• Language: JavaScript
• Homepage:
• Size: 6.48 MB
• Stars: 468
• Watchers: 5
• Forks: 60
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## A Stripe-style animated navbar menu

Built with React, [Styled Components](https://www.styled-components.com/), and [React-Flip-Toolkit](https://github.com/aholachek/react-flip-toolkit).







1. [View the demo](https://aholachek.github.io/react-stripe-menu)

2. [Read the tutorial](https://css-tricks.com/building-a-complex-ui-animation-in-react-simply/)

3. [Check out the code for the main dropdown component](https://github.com/aholachek/react-stripe-menu/blob/master/src/DropdownContainer/index.js)

### Details

This animation demo explores how one might recreate [Stripe's animated menu](https://stripe.com/) in React.

In order to keep the example as simple as possible, it focuses mainly on the animation aspect and therefore is not WAI-ARIA compliant. (Take a look at Stripe's full implementation for what seems to be a fully accessible nav menu component.)

There are multiple ways one could implement this animation, each with its own tradeoffs. This demo is particularly focused on developer ease of use.