All Projects → aholachek → Mobile First Animation

aholachek / Mobile First Animation

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

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Mobile First Animation

gestures
A library for normalized events and gesture for desktop and mobile.
Stars: ✭ 31 (-98.45%)
Mutual labels:  mobile-web, gestures
React Native Easy Gestures
React Native Gestures. Support: Drag, Scale and Rotate a Component.
Stars: ✭ 153 (-92.34%)
Mutual labels:  gestures
Storybook Mobile
A storybook addon that helps you create truly mobile-friendly components
Stars: ✭ 93 (-95.35%)
Mutual labels:  mobile-web
Geomapping With Unity Mapbox
Geomap is the virtualization of data that maps a Country. Mapbox Unity SDK gives data(Global map layers of Streets, Buildings, Elev, and Satellite) generating custom 3D worlds for Mobile VR/AR apps.
Stars: ✭ 118 (-94.09%)
Mutual labels:  mobile-web
Jscost.org
JSCost.org - a JavaScript cost visualizer 💸
Stars: ✭ 101 (-94.94%)
Mutual labels:  mobile-web
Components
MobileUI was created thinking of making your hybrid application faster and smaller since you only install what you are really going to use for UI.
Stars: ✭ 125 (-93.74%)
Mutual labels:  mobile-web
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-95.85%)
Mutual labels:  mobile-web
Webfundamentals
Best practices for modern web development
Stars: ✭ 12,335 (+517.37%)
Mutual labels:  mobile-web
Fundcharts
轻量级canvas数据可视化组件库(可在web移动端、微信小程序、服务端nodejs运行)。包含折线图/面积图、饼图/环形图、柱状图、雷达图(蜘蛛图),散点图,K线图,组合图,持续更新及维护。
Stars: ✭ 143 (-92.84%)
Mutual labels:  mobile-web
Mobiscroll
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Stars: ✭ 1,510 (-24.42%)
Mutual labels:  mobile-web
Opennote
OpenNote was built to be an open web-based alternative to Microsoft OneNote (T) and EverNote.
Stars: ✭ 1,489 (-25.48%)
Mutual labels:  mobile-first
Touche
The desktop application to configure Touchégg
Stars: ✭ 101 (-94.94%)
Mutual labels:  gestures
Taptaptap
🕹 Open Source Javascript Game
Stars: ✭ 131 (-93.44%)
Mutual labels:  mobile-web
Mobilebone
Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...
Stars: ✭ 1,357 (-32.08%)
Mutual labels:  mobile-web
Web.dev
The frontend, backend, and content source code for web.dev
Stars: ✭ 2,370 (+18.62%)
Mutual labels:  mobile-web
Leaflet Gps
Simple leaflet control plugin for tracking gps position
Stars: ✭ 90 (-95.5%)
Mutual labels:  mobile-web
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (-6.21%)
Mutual labels:  mobile-web
Vue Slim Better Scroll
💇‍♀️ 简洁易用的/渐进式的 vue 移动端滚动组件,仿QQ的下拉刷新和上拉滚动无限加载体验
Stars: ✭ 124 (-93.79%)
Mutual labels:  mobile-web
Sign Language Interpreter Using Deep Learning
A sign language interpreter using live video feed from the camera.
Stars: ✭ 157 (-92.14%)
Mutual labels:  gestures
Mobile Select Area
手机联动选择地区
Stars: ✭ 157 (-92.14%)
Mutual labels:  mobile-web

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].