• Stars
    star
    2,069
  • Rank 22,341 (Top 0.5 %)
  • Language
    JavaScript
  • Created about 5 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

Gesture-driven animation on the mobile web (React Conf 2019)

Mobile First Animation in React

swipeable tabs an animated drawer inspired by the Apple Music app animated grid of images dismissable email list

View this repo as a live demo in CodeSandbox.

React Conf 2019 Talk

This repo contains the source code of the demos for this talk about mobile animation.

The interactive slides for the talk can be found here.

Springs Playground

You can play with the spring demo from the talk here.

Notes:

  • If you find any bugs or UI inconsistencies, please make an issue!
  • These are animation demos and as such they are not production-ready UI code. They are not fully accessible, and don't have desktop variants.
  • Adhering to animation best practices can ensure that animations perform acceptably on newer "average", sub-$200 devices. However, there are some devices (older or very inexpensive phones) that will have difficulties achieving minimally acceptable animation performance. Make sure to test your animations on the phones of your target audience before committing to add them.

More Repositories

1

react-flip-toolkit

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

animate-css-grid

Painless transitions for CSS Grid
TypeScript
1,300
star
3

react-animation-comparison

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

bundle-wizard

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

react-stripe-menu

A clone of Stripe's animated menu using React, Styled Components and React-Flip-Toolkit
JavaScript
458
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