Code Monkey home page Code Monkey logo

mobile-first-animation's Introduction

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.

mobile-first-animation's People

Contributors

aholachek avatar flameddd avatar kunukn avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

brunolemos jithinraj abumuawiyah raineydavid sbrichardson jonatansalas segore rehan-sattar jeffweim cli53 15001217168 tchigher sean0921 hhy5277 yudafanani forkkit keensys k388 javialex95 lkjx77 hnq90 nummi syed-ahmad thaneacheron mrm8488 sergiolenza usergit csscheck segunolalive benfluleck ubi-mirrors kunukn prabu-ramaraj git2358 pinglu85 whoisryosuke mursalghori reloadbrain empire7sv pedestrian93 thommorais haishanh nikhilnamal17 i-pip phonbopit lyuji282 nitintushir0048 ctsin rasarab danilucaci njzydark pquarme concatenateabdul osharim robertfrontend nicolazj khadorkin daodaoliang aadilhasan heinnhtetzaw nisarhassan12 saurabhk06 captainamiedi lucasgdiez xesrevinu nawazkhan danielkpodo armspkt hasparus syedpeer michael-tjoe flameddd nicolashedoire rk-forfuns sarangkartikey50 manxeguin denfedweb pradeeptry tungtranhcmus komagic soundmasteraj bakoushin bilalesi ajitid joakim-roos drasya alexrogalskiy andrepaulodantas davidloiret jazael gg-big-org 3ulucstomchi linecode

mobile-first-animation's Issues

hhh

hhh

jjkd

****hhj
hhh
hhhh

hhhhhd

hhhj

Janky Animations

Hi @aholachek,
Loved your talk! big fan of your work.

So I went and tried out the demos in this repo after struggling to improve performance of a "Card Swipe" interaction I've been developing recently for a mobile-first web app.

Unfortunately I couldn't get good performance on these.

I'm starting to be skeptical about the ability to display smooth animations on non-high-end devices (which is the majority of phones out there).

I ran these on a Xiaomi Redmi 3 phone (released 2016, about $150 USD, quite popular in asia)

Music Player demo

music-player-screenshot

Chrome-loadable Profile:
mobile-music-player-dev.json.zip

Email List demo

email-list-screenshot

Chrome-loadable Profile:
email-list.json.zip

Is there a link to watch the talk?

Thank you for sharing a good slide. After looking over it, I think it would be much better to watch it as video. Do you have a link to watch the talk? 😃

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.