{"id":13394423,"url":"https://github.com/jondot/react-flight","last_synced_at":"2025-05-15T10:06:27.135Z","repository":{"id":21908921,"uuid":"94404614","full_name":"jondot/react-flight","owner":"jondot","description":"The best way to build animation compositions for React.","archived":false,"fork":false,"pushed_at":"2022-12-07T01:01:02.000Z","size":3517,"stargazers_count":2819,"open_issues_count":57,"forks_count":69,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-14T16:56:20.754Z","etag":null,"topics":["animation","composition","react"],"latest_commit_sha":null,"homepage":"https://jondot.github.io/react-flight/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jondot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-15T05:52:50.000Z","updated_at":"2025-03-17T15:01:24.000Z","dependencies_parsed_at":"2023-01-12T03:46:09.681Z","dependency_job_id":null,"html_url":"https://github.com/jondot/react-flight","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2Freact-flight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2Freact-flight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2Freact-flight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jondot%2Freact-flight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jondot","download_url":"https://codeload.github.com/jondot/react-flight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319718,"owners_count":22051072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","composition","react"],"created_at":"2024-07-30T17:01:18.976Z","updated_at":"2025-05-15T10:06:27.057Z","avatar_url":"https://github.com/jondot.png","language":"JavaScript","readme":"![](media/flight.png)\n[https://jondot.github.io/react-flight/](https://jondot.github.io/react-flight/)\n\n\u003cimg src=\"https://travis-ci.org/jondot/react-flight.svg?branch=master\"\u003e\n\nThe best way to build animation compositions for React. Design and compose a\ncomponent to start with, a component to end with, and Flight will take it from\nthere.\n\nFlight tries to be for React what [Principle](http://principleformac.com/) is\nfor Sketch compositions - the fastest, most friction free way to compose and an\neffortless way to animate an idea, an interaction, or a short movie-like\ncomposition in a self-contained widget (a React component after all).\n\n\nCheck out the new video:\n\u003cbr/\u003e\n\u003ca href=\"https://youtu.be/HBEn-KN_u04\"\u003e\n\u003cimg src=\"https://i.ytimg.com/vi/HBEn-KN_u04/hqdefault.jpg\" width=\"240\"/\u003e\n\u003cbr/\u003e\nReact Flight in Three Minutes\n\u003c/a\u003e\n\n## Quick Start (From Scratch)\n\nJust clone and use the example, built around `create-react-app`:\n\n```\n$ git clone https://github.com/jondot/react-flight\n$ cd react-flight/examples/compos\n$ yarn \u0026\u0026 yarn start\n```\n\n\n## Quick Start (Existing Project)\n\nWith yarn (or npm):\n\n```\n$ yarn add react-flight\n$ curl https://raw.githubusercontent.com/jondot/react-flight/master/examples/compos/src/index.js -o src/anim.js\n```\n\nAnd now you can frame your compositions in `anim.js`, require and place it in\nany other React component.\n\nNext:\n\n1. Add jQuery (or Zepto, or any jQuery drop-in) if you don't have it already in the project.\n2. Or if you use `create-react-app` you can add it to your `public/index.html`, [like here](examples/compos/public/index.html),\nor eject and [configure webpack](https://webpack.github.io/docs/library-and-externals.html) for jQuery.\n\n_NOTE_: jQuery is currently a requirement of one of `react-flight`'s dependencies.\nWe plan to rebuild that dependency any way, obsoleting this requirement in the\nprocess (also: PRs accepted!).\n\n## Workflow\n\nWhen you're designing compositions, focus on designing frames. The\nfirst frame is marked `source` because that's the starting point, and\n`interactive` because you want to play with it while you go.\n\n```jsx\n  \u003cFlight interactive ref={flight =\u003e (this.flight = flight)}\u003e\n    \u003cFlight.Frame duration={300} source interactive showFrames\u003e\n```\n\n### Showing Frames\n\nWhile designing, you want to have `showFrames` on. It will unpack\nall of the frames in front of you, so you could edit them while watching them. With\nWebpack hot-reload this becomes a fantastic experience.\n\nWhen done, remove `showFrames`.\n\n### Controlling Flight Directly\n\nThis is where the `ref` addition comes in:\n\n```jsx\n  \u003cFlight interactive ref={flight =\u003e (this.flight = flight)}\u003e\n    \u003cFlight.Frame duration={300} source interactive showFrames\u003e\n```\n\nOnce you can grab an instance of `flight` you can `flight.play()` and `flight.reset()` on\ndemand from your own components and actions.\n\nHere's a full layout:\n\n```jsx\n  \u003cFlight interactive ref={flight =\u003e (this.flight = flight)}\u003e\n    \u003cFlight.Frame duration={300} source interactive showFrames\u003e\n\n      -- your own DOM / React Components ---\n      -- starting position and styles    ---\n\n    \u003c/Flight.Frame\u003e\n\n    \u003cFlight.Frame\u003e\n\n      -- your own DOM / React Components ---\n      -- ending position and styles    ---\n\n    \u003c/Flight.Frame\u003e\n  \u003c/Flight\u003e\n```\n\n\n\n\n\n## Redux\n\nIf you're using Redux, there's basic support for it. Basic in the sense that `react-flight` is not\ngoing to handle deep renders of a stateful app with all its gotchas, so YMMV.\n\nYou can check out [this Redux example](examples/compos-redux) for a fully working solution.\n\n\nFor your app, you can enable Redux support by indicating inclusion of store before using the `Flight` component:\n\n```javascript\nFlight.contextTypes = {\n  store: PropTypes.object,\n}\n\nFlight.childContextTypes = {\n  ...Flight.childContextTypes,\n  store: PropTypes.object,\n}\n```\n\n\n\n## Under the Hood\n\nIf you want to hack on `react-flight`, here are some context to keep in mind.\n\n`react-flight` does some cool stuff and some DOM-heavy stuff (perhaps less cool?). For the cool stuff, it\nwalks the component tree, makes decisions about what should move where, and builds\na clean and nice declarative data structure that represents the way compositions should\nbehave.\n\nCurrently it will then hand over this data to a DOM-based adapter, that also uses Velocity.js,\nso that it would actually orchestrate the animations. This is where you're welcome\nto plug in your own adapter - another animation engine, React Native, and what not.\n\nHappy hacking!\n\n\n# Contributing\n\nFork, implement, add tests, pull request, get my everlasting thanks and a respectable place here :).\n\n\n### Thanks:\n\nTo all [Contributors](https://github.com/jondot/react-flight/graphs/contributors) - you make this happen, thanks!\n\n\n# Copyright\n\nCopyright (c) 2017 [Dotan Nahum](http://gplus.to/dotan) [@jondot](http://twitter.com/jondot). See [LICENSE](LICENSE) for further details.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondot%2Freact-flight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjondot%2Freact-flight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjondot%2Freact-flight/lists"}