react-dip
v0.0.3-beta.10
Simple & declarative transition animations for React
0/weekUpdated 3 years agoMITUnpacked: 84.3 KB
Published by Manuel Dugue
npm install react-dipreact-dip
Simple & declarative transition animations for React.
DISCLAIMER
THIS IS EARLY WORK IN PROGRESS AND NOT "RELEASED TO PUBLIC" YET, THOUGH THIS SHOULD HAPPEN ANYTIME SOON.
FEEL FREE TO WATCH 👓, STAR ⭐ OR CONTACT ME TO BE NOTIFIED ABOUT PROGRESS.
_TODO: Video / gif here_
Why?
Ever wanted to implement one of those incredible designs you find on dribble or Muzli where one element beautifully transforms into another upon page transition? And then realized _"But I want my code to stay statefull, decoupled, scalable, declarative"_, so you ended up with regular "hard cuts" instead? – To me this happend very very often!
react-dip solves this by providing animated transisions in an effortless way, that _just worksTM_, by using the FLIP technique.
Table of contents
* Installation
* Quick Start
* Props
* dipId
* children
* render
* duration
* easing
* element
* optInCssStyles
* className, id, style, aria-..., role, etc.
* Polyfill
* Examples
* Dip-WHAT???
* How it works (TODO)
* Browser Compatiblity
* Caveats (TODO)
* Inspired by
* Huge Thanks to
* TODOs
* To be done before anouncing
* For some near future milestone
Installation
``bash
$ yarn add react-dip
or using npm
$ npm install --save react-dip
`
Using a module bundler like webpack or parcel, import your depency just as any other:
javascript
// Using ES6 modules
import Dip from 'react-dip'// or using CommonJS modules
var Dip = require('react-dip')
`UMD builds are also available via unpkg:
javascript
`Quick Start
The API is as small as possible, almost everything is optional, so you see results immediately. Just wrap your Items in a
jsx
import React, {Component} from 'react'
import Dip from 'react-dip'function Component1() {
return (
some content
)
}
function Component2() {
return (
style={{position: 'absolute', top: '100px', background: 'green'}}
>
some other content
etc...
)
}
// use complex state here
// or a routing solution such as react-router
// or connect it to redux, or ustated
export default class MyStatefulParent extends Component {
state = {currentStep: 0}
toggleState = () =>
this.setState(state => ({
currentStep: (state.currentStep + 1) % 2,
}))
render() {
return (
Quick Start example
{this.state.currentStep === 0 ?
)
}
}
`_Note: Using
as well as absolute positioning is usually not considered a good way and is applied here for the sake of simplicity.
You can use any type CSS or CSS-in-JS styling and fluid / flex / grid layout._
Props
The API surface is intetended to be as simple as possible. Only
dipId and children (or render) are required props. The rest is optional and helps you fine tuning your animations.$3
>
string | Required!The
id that groups two different dip elements. React-dip will only create animated transitions between to Elements with the same dipId, consider them as potential _from_- and _to_-hints.$3
>
React Element | Required unless using render-prop!Content that is rendered as part of that
Dip.$3
>
function({ref: function(), styles: {}}) | Required unless using children-prop!Function that should return the content that is rendered as part of that
Dip. Allows for more advanced pattern and skips the wrapping Element. See render prop for further details.Warning:
takes precedence over so don’t use both in the same .$3
>
number | _optional_, defaults to 200Time in milliseconds the animation will take when transitioning _to_ this dip.
$3
>
| _optional_, defaults to "ease-out"Specifies the desired timing function. Accepts the pre-defined values
, ease, ease-in, ease-out, and ease-in-out, or a custom cubic-bezier value like cubic-bezier(0.42, 0, 0.58, 1).$3
>
string | _optional_, defaults to "div"Specify the desired HTML-tag here (eg.
) in case you don't want your children wrapped in a div.$3
>
Array(string) | _optional_, defaults to an empty arrayBy default
will morph your components _only_ regarding their sizes and positions using css transforms which is usually a good default regarding performance.
In case you want to morph more css properties you can specify them here, such as optInCssStyles={["borderRadius", "backgroundColor"]}. _optional_$3
> default
react / HTML attributes | _optional_Any provided standard attribute is passed to the child-container.
Polyfill
As some browsers do not support the Web Animations API, we recommend using the web-animations-js Polyfill.
1. Install the dependency
`bash
$ yarn add web-animations-jsor using npm
$ npm install --save web-animations-js
`2. include the dependency into your project.
javascript
import('web-animations-js') // We recommend dynamic imports to keep initial bundlesize small
`Examples
* Quick Start Example
* Styled Components, render Props & beautiful images
* With React Router and Material-UI
Dip-WHAT???
No _DEEEE-EYE-PEEE_, just dip your taco into some tasty salsa. 🌮
How it works (TODO)
* Dip-Communication, dipId, from & to
* FLIP
Browser Compatiblity
| Chrome | Firefox | Safari | Edge | IE | iOS |
| ------ | ------- | --------------- | --------------- | --------------- | --------------- |
| ✅ | ✅ | ✅\ | ✅\ | ✅\ | ✅\ |
Caveats (TODO)
* Block-Elements h1 etc
* nested Elements
* transitioning to elements in scrolled lists (via browser back)
* text can get distorted
* styles from nested queries eg: animating
which is styled via section h1 (might be fixable _a little bit_, not sure if it is worth though, as it is somehow considered bad practices anyhow?)Inspired by
* https://github.com/joshwcomeau/react-flip-move
Huge Thanks to
* Kent C. Dodds for his inspiring work, such as kcd-scripts
* Ives van Horne amongst other for CodeSandbox
TODOs
There are tons of ideas for improving
react-dip such as adding fine grained control to your transitions, but the primary goal will stay to keep the API as symple as possible.$3
* [x] add chapter about polyfilling
* [x] render props (of course)
* [x] add support for custom timing functions
* [ ] add complex examples with renderProps, routing etc.
* [ ] add possibility of declaring alternative components that are shown whilst animating
* [ ] export types for flow and typescript
* [ ] add contributing guide lines
* [x] add error handling for props
* [ ] add error handling for refs
* [x] move animation to proper element, allowing for parents with
overflow: hidden and avoiding z-index issues$3
* [ ] add support for staggering
* [ ] add real tests
* [ ] export types for flowtyped and typescript
* [ ] add optional
placeholder component that is shown whilst animating
* [ ] add documentation, (maybe even abstractions) for image transitions from low-res to high-res
* [ ] make animation-layer custmizable, so regular items _can_ be in front of them (z`-wise)* [ ] investigate possible optimizations for the scrolling issues