• Stars
    star
    458
  • Rank 95,591 (Top 2 %)
  • Language
    JavaScript
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

A Stripe-style animated navbar menu

Built with React, Styled Components, and React-Flip-Toolkit.

  1. View the demo

  2. Read the tutorial

  3. Check out the code for the main dropdown component

Details

This animation demo explores how one might recreate Stripe's animated menu 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.

More Repositories

1

react-flip-toolkit

A lightweight magic-move library for configurable layout transitions
TypeScript
3,773
star
2

mobile-first-animation

Gesture-driven animation on the mobile web (React Conf 2019)
JavaScript
2,069
star
3

animate-css-grid

Painless transitions for CSS Grid
TypeScript
1,300
star
4

react-animation-comparison

A tour of React animation libraries with a focus on developer experience
JavaScript
685
star
5

bundle-wizard

Magically easy insight into the JavaScript loaded by a web app
JavaScript
684
star
6

storybook-mobile

[Deprecated] A storybook addon that helps you create truly mobile-friendly components
JavaScript
107
star
7

react-flip-toolkit-router-example

Meaningful transitions with react-router-v4 and react-flip-toolkit
JavaScript
102
star
8

aholachek.github.io

My website
JavaScript
53
star
9

redux-usage-report

A Redux Devtools monitor to audit your app's usage of the store
JavaScript
41
star
10

react-animations-from-scratch

JavaScript
20
star
11

react-2019-interactive-workbook

Learn new features of React interactively
JavaScript
18
star
12

scrollbounce

Add a subtle bounce effect on mobile when the user scrolls (WIP)
JavaScript
17
star
13

react-spring-workshop

Learn by building small animations
JavaScript
9
star
14

gif-search

Take a selfie, get a gif
CSS
8
star
15

github-actions-examples

Tiny test repo for github actions
HTML
7
star
16

review-fetch

Code exercises to help you solidify your knowledge of fetch
JavaScript
6
star
17

react-fancy-tween-circular-progress

A configurable circular progress bar with color and number animation
JavaScript
3
star
18

virgin-airlines

A prototype for a Virgin Airlines mobile ticket site redesign
JavaScript
1
star
19

overdrive-experiment

JavaScript
1
star
20

tap-demo

JavaScript
1
star
21

npm-script-starter

A basic front end development setup using npm scripts
JavaScript
1
star
22

spring-example

JavaScript
1
star
23

meaningful-layout-transitions

JavaScript
1
star
24

gif-search-backend

JavaScript
1
star
25

basic-postcss-setup

A simple npm scripts-powered set up for experimenting with Shoelace.css and postcss in general
HTML
1
star