GitHub - aholachek/react-flip-toolkit: A React FLIP animation helper library for...
source link: https://github.com/aholachek/react-flip-toolkit
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
react-flip-toolkit
Comparison with other React FLIP libraries
Featurereact-flip-move
react-overdrive
react-flip-toolkit
Animate position
✅
✅
✅
Animate size
❌
✅
✅
Animate opacity
❌
✅
✅
Animate parent's size without warping children
❌
❌
✅
Use real FLIP instead of cloning & crossfading
✅
❌
✅
Enable nested animations
❌
❌
✅
Easy to set up/beginner-friendly
✅
✅
?
Demos
(Click to see interactive version)
- Simplest possible example
- Guitar shop
- Absurd, overly complex, nested example
- React-flip-toolkit logo
What is FLIP?
If you need a refresher, here's an article by the person who created FLIP: Flip Your Animations
Quick start
npm install react-flip-toolkit
import { Flipper, Flipped } from 'react-flip-toolkit'
Wrap your container element with a Flipper
component that has a flipKey
prop that changes every time an animation should happen.
Wrap elements that should be animated with Flipped
components that have flipId
props matching them across renders.
Simplest possible example:
1. Flipper component
The parent wrapper component that contains all the elements to be animated:
<Flipper flipKey={someKeyThatChanges}> {/* children wrapped in Flipped components*/} </Flipper>
prop default type details flipKey (required)
string
, number
, bool
Changing this tells react-flip-toolkit
to transition child elements wrapped in Flipped
components.
children (required)
node
One or more element children
ease
easeOutExpo
string
Set the default easing for all FLIP transitions: Interactive explorer for all easing options
duration
250
number
Default duration in ms for all FLIP transitions
applyTransformOrigin
true
bool
Whether or not react-flip-toolkit
should apply a transform-origin of "0 0" to animating children (this is generally desirable for FLIP animations)
2. Flipped component
A component that wraps an element that needs to be animated.
E.g. in one component you can have
<Flipped flipId="coolDiv"> <div className="small" /> </Flipped>
and in another component somewhere else you can have
<Flipped flipId="coolDiv"> <div className="big" /> </Flipped>
and they will be tweened by react-flip-toolkit
.
prop default type details children (required)
node
Wrap a single child with the Flipped
component. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element so that Flipped
can pass down the necessary data-*
attributes.
flipId (required)
string
Use this to tell react-flip-toolkit
how elements should be matched across renders so they can be animated.
inverseFlipId
string
refer to the id of the parent Flipped
container whose transform you want to cancel out. Read more about canceling out parent transforms here
transformOrigin
"0 0"
string
this is a convenience method to apply the proper CSS transform-origin
to the element being FLIP-ped. This will override react-flip-toolkit
's default application of transform-origin: 0 0
if it is provided as a prop.
ease
easeOutExpo
string
This string should refer to one of the available easing options). This prop will override the easing specified in the parent Flipped
component.
duration
250
number
Timing for the individual FLIP transition, this will override the one specified in the parent Flipped
component
delay
0
number
Amount of time to wait before tweening the element position.
onAppear(element, index)
func
called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second.
onStart(element)
func
called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument
onComplete(element)
func
called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, onComplete
will still be called.)
By default the FLIP-ped elements' translate, scale, and opacity properties are all transformed. However, certain effects require more control so if you specify any of these props, only the specified attribute(s) will be tweened:
prop
type
details
translate
bool
Tween translateX
and translateY
scale
bool
Tween scaleX
and scaleY
opacity
bool
Advanced and usually unnecessary:
prop type details componentIdstring
Unique identifier for the component
componentIdFilter
string
Only apply FLIP transitions if the transition originates or ends with a component with the specified componentId
Scale transitions made eas(ier)
Some other FLIP libraries just allow you to animate position changes, but things get a lot more interesting once you can animate scale changes as well (check out the demos to see what scale animations bring to the table).
The problem with scale animations has to do with children -- if you scale a div up 2x, you will warp any children it has by scaling them up too, creating a weird-looking animation. That's why this library allows you to wrap the child with a Flipped
component that has an inverseFlipId
to counteract the transforms of the parent:
<Flipped flipId={parentFlipId}> <div> <Flipped inverseFlipId={parentFlipId} scale> <div>some text that will not be warped</div> </Flipped> </div> </Flipped>
By default, not only the scale of the parent will be counteracted, but also the translations (this allows children components to make their own FLIP animations without being affected by the parent).
But for many/most use cases, you'll want to additionally specify the scale
prop to limit the adjustment to the scale and allow the positioning to move with the parent.
Other details
- ~7.6kb minified and gzipped
- React 16+
- Tested in latest Chrome, Firefox, Safari + Edge
FAQ
-
Why isn't anything animating? Make sure you're updating the
flipKey
attribute in theFlipper
component whenever an animation should happen. -
Why does my animation look "off"? Try increasing the duration to something ridiculous like
10000
so that you can catch every detail. When the animations happen quickly it's hard to consciously spot little issues that can interfere with the final effect. -
Why is the element animating from or to an unexpected position? At any point, there can only be 1 element with a specified
flipId
on the page. If there are multipleFlipped
elements on the page with the same id, things will start to get weird. Check to make sure allflipId
s are unique.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK