Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.

Overview

React Flip Move

build status npm version npm monthly downloads

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes.

CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

Flip Move uses the FLIP technique to work out what such a transition would look like, and fakes it using 60+ FPS hardware-accelerated CSS transforms.

Read more about how it works

demo

Current Status

React Flip Move is looking for maintainers!

In the meantime, we'll do our best to make sure React Flip Move continues to work with new versions of React, but otherwise it isn't being actively worked on.

Because it isn't under active development, you may be interested in checking out projects like react-flip-toolkit.

Demos

Installation

Flip Move can be installed with NPM or Yarn.

yarn add react-flip-move

# Or, if not using yarn:
npm i -S react-flip-move

A UMD build is made available for those not using JS package managers:

To use a UMD build, you can use <script> tags:

<html>
  <body>
    <script src="https://unpkg.com/react-flip-move/dist/react-flip-move.js"></script>
    <script>
      // Will be available under the global 'FlipMove'.
    </script>
  </body>
</html>

Features

Flip Move was inspired by Ryan Florence's awesome Magic Move, and offers:

  • Exclusive use of hardware-accelerated CSS properties (transform: translate) instead of positioning properties (top, left). Read why this matters.

  • Full support for enter/exit animations, including some spiffy presets, that all leverage hardware-accelerated CSS properties.

  • Ability to 'humanize' transitions by staggering the delay and/or duration of subsequent elements.

  • Ability to provide onStart / onFinish callbacks.

  • Compatible with Preact (should work with other React-like libraries as well).

  • Tiny! Gzipped size is <5kb!

Quickstart

Flip Move aims to be a "plug and play" solution, without needing a lot of tinkering. In the ideal case, you can wrap the children you already have with <FlipMove>, and get animation for free:

/**
 * BEFORE:
 */
const TopArticles = ({ articles }) => (
  {articles.map(article => (
    <Article key={article.id} {...article} />
  ))}
);

/**
 * AFTER:
 */
import FlipMove from 'react-flip-move';

const TopArticles = ({ articles }) => (
  <FlipMove>
    {articles.map(article => (
      <Article key={article.id} {...article} />
    ))}
  </FlipMove>
);

There are a number of options you can provide to customize Flip Move. There are also some gotchas to be aware of.

Usage with Functional Components

Functional components do not have a ref, which is needed by Flip Move to work. To make it work you need to wrap your functional component into React.forwardRef and pass it down to the first element which accepts refs, such as DOM elements or class components:

import React, { forwardRef } from 'react';
import FlipMove from 'react-flip-move';

const FunctionalArticle = forwardRef((props, ref) => (
  <div ref={ref}>
    {props.articleName}
  </div>
));

// you do not have to modify the parent component
// this will stay as described in the quickstart
const TopArticles = ({ articles }) => (
  <FlipMove>
    {articles.map(article => (
      <FunctionalArticle key={article.id} {...article} />
    ))}
  </FlipMove>
);

API Reference

View the full API reference documentation

Enter/Leave Animations

View the enter/leave docs

Compatibility

Chrome Firefox Safari IE Edge iOS Safari/Chrome Android Chrome
Supported 10+ 4+ 6.1+ 10+ 6.1+

How It Works

Curious how this works, under the hood? Read the Medium post.


Wrapping Element

By default, Flip Move wraps the children you pass it in a <div>:

// JSX
<FlipMove>
  <div key="a">Hello</div>
  <div key="b">World</div>
</FlipMove>

// HTML
<div>
  <div>Hello</div>
  <div>World</div>
</div>

Any unrecognized props to <FlipMove> will be delegated to this wrapper element:

// JSX
<FlipMove className="flip-wrapper" style={{ color: 'red' }}>
  <div key="a">Hello</div>
  <div key="b">World</div>
</FlipMove>

// HTML
<div class="flip-wrapper" style="color: red;">
  <div key="a">Hello</div>
  <div key="b">World</div>
</div>

You can supply a different element type with the typeName prop:

// JSX
<FlipMove typeName="ul">
  <li key="a">Hello</li>
  <li key="b">World</li>
</FlipMove>

// HTML
<ul>
  <li key="a">Hello</li>
  <li key="b">World</li>
</ul>

Finally, if you're using React 16 or higher, and Flip Move 2.10 or higher, you can use the new "wrapperless" mode. This takes advantage of a React Fiber feature, which allows us to omit this wrapping element:

// JSX
<div className="your-own-element">
  <FlipMove typeName={null}>
    <div key="a">Hello</div>
    <div key="b">World</div>
  </FlipMove>
</div>

// HTML
<div class="your-own-element">
  <div key="a">Hello</div>
  <div key="b">World</div>
</div>

Wrapperless mode is nice, because it makes Flip Move more "invisible", and makes it easier to integrate with parent-child CSS properties like flexbox. However, there are some things to note:

  • This is a new feature in FlipMove, and isn't as battle-tested as the traditional method. Please test thoroughly before using in production, and report any bugs!
  • Flip Move does some positioning magic for enter/exit animations - specifically, it temporarily applies position: absolute to its children. For this to work correctly, you'll need to make sure that <FlipMove> is within a container that has a non-static position (eg. position: relative), and no padding:
// BAD - this will cause children to jump to a new position before exiting:
<div style={{ padding: 20 }}>
  <FlipMove typeName={null}>
    <div key="a">Hello world</div>
  </FlipMove>
</div>

// GOOD - a non-static position and a tight-fitting wrapper means children will
// stay in place while exiting:
<div style={{ position: 'relative' }}>
  <FlipMove typeName={null}>
    <div key="a">Hello world</div>
  </FlipMove>
</div>

Gotchas

  • Does not work with stateless functional components without a React.forwardRef, read more about here. This is because Flip Move uses refs to identify and apply styles to children, and stateless functional components cannot be given refs. Make sure the children you pass to <FlipMove> are either native DOM elements (like <div>), or class components.

  • All children need a unique key property. Even if Flip Move is only given a single child, it needs to have a unique key prop for Flip Move to track it.

  • Flip Move clones the direct children passed to it and overwrites the ref prop. As a result, you won't be able to set a ref on the top-most elements passed to FlipMove. To work around this limitation, you can wrap each child you pass to <FlipMove> in a <div>.

  • Elements whose positions have not changed between states will not be animated. This means that no onStart or onFinish callbacks will be executed for those elements.

  • Sometimes you'll want to update or change an item without triggering a Flip Move animation. For example, with optimistic updating, you may render a temporary version before replacing it with the server-validated one. In this case, use the same key for both versions, and Flip Move will treat them as the same item.

Known Issues

  • Interrupted enter/leave animations can be funky. This has gotten better recently thanks to our great contributors, but extremely fast adding/removing of items can cause weird visual glitches, or cause state to become inconsistent. Experiment with your usecase!

  • Existing transition/transform properties will be overridden. I am hoping to change this in a future version, but at present, Flip Move does not take into account existing transition or transform CSS properties on its direct children.

Note on will-change

To fully benefit from hardware acceleration, each item being translated should have its own compositing layer. This can be accomplished with the CSS will-change property.

Applying will-change too willy-nilly, though, can have an adverse effect on mobile browsers, so I have opted to not use it at all.

In my personal experimentations on modern versions of Chrome, Safari, Firefox and IE, this property offers little to no gain (in Chrome's timeline I saw a savings of ~0.5ms on a 24-item shuffle).

YMMV: Feel free to experiment with the property in your CSS. Flip Move will respect the wishes of your stylesheet :)

Further reading: CSS will-change Property

Contributions

Contributors welcome! Please discuss new features with me ahead of time, and submit PRs for bug fixes with tests (Testing stack is Mocha/Chai/Sinon, tested in-browser by Karma).

There is a shared prepush hook which launches eslint, flow checks, and tests. It sets itself up automatically during npm install.

Development

This project uses React Storybook in development. The developer experience is absolutely lovely, and it makes testing new features like enter/leave presets super straightforward.

After installing dependencies, launch the Storybook dev server with npm run storybook.

This project adheres to the formatting established by airbnb's style guide. When contributing, you can make use of the autoformatter prettier to apply these rules by running the eslint script npm run lint:fix. If there are conflicts, the linter triggered by the prepush hook will inform you of those as well. To check your code by hand, run npm run lint.

Flow support

Flip Move's sources are type-checked with Flow. If your project uses it too, you may want to install typings for our public API from flow-typed repo.

npm install --global flow-typed # if not already
flow-typed install [email protected]<version>

If you're getting some flow errors coming from node_modules/react-flip-move/src path, you should add this to your .flowconfig file:

[ignore]
.*/node_modules/react-flip-move/.*

License

MIT

Comments
  • Prop to Determine Pre-set Translations

    Prop to Determine Pre-set Translations

    Regarding "Existing transition/transform properties will be overridden", for the present what if react-flip-move checked for a prop on the children for example translate3d={[x, y, z]}. I believe this would be a valid solution for now as the user most likely will know the translations of their elements before hand. It also saves the need to parse existing CSS properties which may lessen the animation performance. For items that already have a translate3d prop I propose 2 custom options for the parent container stating what prop to transform from and whether to take into account transforms at all. Let me know what you think, I'd be happy to contribute to the implementation of this!

    Also, great work on the library, I absolutely love it.

    enhancement 
    opened by marcus433 27
  • Cannot read property 'top' of undefined / 'getBoundingClientRect' of null

    Cannot read property 'top' of undefined / 'getBoundingClientRect' of null

    When removing adding and removing items the FlipMove breaks with the error:

    Uncaught TypeError: Cannot read property 'top' of undefined: https://github.com/joshwcomeau/react-flip-move/blob/master/src/dom-manipulation.js#L141

    Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null: And https://github.com/joshwcomeau/react-flip-move/blob/master/src/prop-converter.js#L217

    You can see these errors being thrown by clicking rapidly on the add / remove buttons using the following example: https://gist.github.com/ConneXNL/c320db6f8898982f78b1b5cd4dc4cfea

    bug 
    opened by jrmyio 23
  • Rendering component to null causes error

    Rendering component to null causes error

    I have a list of components (called Factor), and if I don't want to show the item I render the component null. This inserts a react-empty which seems to be causing the getBoundingClientRect error in the screenshot below.

    If I show all of the components (so all react-empty are gone), everything works great.

    Is there a better way to conditionally display the items? Or perhaps another workaround? I apologize, I'm not familiar enough with this library yet to recommend a patch.

    screen shot 2016-11-18 at 8 20 55 pm

    bug 
    opened by ajcronk 19
  • Revamped build infrastructure, added module entry, flat bundling

    Revamped build infrastructure, added module entry, flat bundling

    I'm also pretty sure that this is a bad practice - https://github.com/joshwcomeau/react-flip-move/blob/master/src/polyfills.js . You should never automatically patch user's environment - you can either force people to patch it themselves or just use those polyfills locally without messing global prototypes. I can provide a PR for this if you agree with me - just let me know.

    react-flip-move.min.js - gzipped size pre PR - 6697 bytes post PR - 5100 bytes

    Savings - nearly 24% 💰

    opened by Andarist 17
  • Allow for graceful interrupts

    Allow for graceful interrupts

    Right now, if an animation is interrupted, the results can be jerky. By considering the current translation at the start of the transition, we should be able to transition from that origin to the destination.

    enhancement 
    opened by joshwcomeau 17
  • Enter/Exit animations

    Enter/Exit animations

    A few people have asked about Enter/Exit animations.

    I think it's possible to keep in line with the FLIP methodology. Here's how I envision exit animations working:

    • When the component receives new props, we check to see if any items are about to be removed
    • We instead keep those elements, but apply an immediate style (something like transform: scale(0, 0);). The idea is to make the element take up 0px worth of space, so that when the layout is recalculated, its siblings treat it as though it wasn't there.
    • We then do the FLIP animation. There's some flexibility here, we can have presets for how removed items should be transitioned. They can fade out and shrink, or even just constrict in one axis (a vertical list could have removed items flattened!). I'm excited by this; it allows for a lot of possible customization.
    • Once the animation is complete, we remove those nodes from the DOM by re-rendering directly from the props provided.

    The same process could work for Enter animations. We'd start it at transform: scale(0,0);, and expand it to its normal size while other elements shift out of the way.

    This is a non-trivial change to the source code. We'd need to find a way to "hold on" to the items that are being removed. There may be unforeseen complications.

    I'll try and dedicate some time in the next month to test this idea out. If anyone wants to give this implementation a shot, I'd be delighted :) Let me know if anyone has any questions.

    CC @aight8

    enhancement 
    opened by joshwcomeau 15
  • Add wrapperless mode

    Add wrapperless mode

    addresses https://github.com/joshwcomeau/react-flip-move/issues/200

    With this PR, it will be able to pass false to FlipMoves typeName attribute to have it render out its childs unwrapped (yay react 16). The downside: A dom node has to be passed in as anchor, so it knows where to anchor its animations. If its ommitted, we fall back to findDomNode to get the components parent. you also get lots of warnings free of charge!

    I've added tests, a story in the "basic" chapter, commented code where appropriate and modified the readme.

    i've also upped some version numbers, namely enzyme + adapter. some of the weird behavior on state updates should be gone now.

    opened by tobilen 14
  • Nested <FlipMove> lists don't animate properly

    Nested lists don't animate properly

    I have a structure like this:

    <FlipMove>
        <div class="section">
            <FlipMove>
                <div class="item">...</div>
                <div class="item">...</div>
                <div class="item">...</div>
            </FlipMove>
        </div>
        <div class="section">
            <FlipMove>
                <div class="item">...</div>
                <div class="item">...</div>
                <div class="item">...</div>
            <FlipMove>
        </div>
    </FlipMove>
    

    (pretend everything has a unique key property)

    The items animate correctly, but when a section is moved all of its child items animate as well, making for a confusing jumble of motion.

    (Incidentally, in my use case items can be moved between sections. When that happens the item snaps into the new section with no movement animation (the sections do animate to expand/contract, however). I don't really expect this component to support that kind of functionality, but I figured I'd mention it.)

    bug enhancement 
    opened by cameronhimself 14
  • Flow type complains about several issues with react-flip-move

    Flow type complains about several issues with react-flip-move

    Like this one

    node_modules/react-flip-move/src/enter-leave-presets.js:61
     61: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    

    I'm pretty sure you should be able to remove that. Actually, there are quite a few flow-related issues. I think it may be best to remove src from the package.json. But I could be wrong. I've not done much with flow in OSS yet...

    Here are all the errors I get:

    all of the errors
    node_modules/react-flip-move/lib/FlipMove.js.flow:57
     57:   state = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:69
     69:   childrenData: {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:82
     82:   parentData: NodeData = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:91
     91:   heightPlaceholderData: NodeData = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:101
    101:   remainingAnimations = 0;
           ^^^^^^^^^^^^^^^^^^^^^^^^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:102
    102:   childrenToAnimate: Array<string> = [];
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:164
    164:   runAnimation = () => {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:180
    180:   doesChildNeedToBeAnimated = (child: ChildData) => {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/FlipMove.js.flow:357
    357:     requestAnimationFrame(() => {
             ^^^^^^^^^^^^^^^^^^^^^ identifier `requestAnimationFrame`. Could not resolve name
    
    node_modules/react-flip-move/lib/dom-manipulation.js.flow:152
    152:     [string]: number,
                    ^ Unexpected token ]
    
    node_modules/react-flip-move/lib/enter-leave-presets.js.flow:59
     59: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/lib/enter-leave-presets.js.flow:61
     61: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/lib/enter-leave-presets.js.flow:63
     63: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/lib/enter-leave-presets.js.flow:65
     65: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/lib/helpers.js.flow:40
     40: function memoizeString<T>(fn: (string) => T): (string) => T {
                                                ^^ Unexpected token =>
    
    node_modules/react-flip-move/lib/prop-converter.js.flow:63
     63:     static defaultProps = {
             ^ Experimental class static field usage. Class static fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_static_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/lib/typings.js.flow:5
      5:   [string]: string,
                  ^ Unexpected token ]
    
    node_modules/react-flip-move/src/FlipMove.js:57
     57:   state = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:69
     69:   childrenData: {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:82
     82:   parentData: NodeData = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:91
     91:   heightPlaceholderData: NodeData = {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:101
    101:   remainingAnimations = 0;
           ^^^^^^^^^^^^^^^^^^^^^^^^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:102
    102:   childrenToAnimate: Array<string> = [];
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:164
    164:   runAnimation = () => {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:180
    180:   doesChildNeedToBeAnimated = (child: ChildData) => {
           ^ Experimental class instance field usage. Class instance fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_instance_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/FlipMove.js:357
    357:     requestAnimationFrame(() => {
             ^^^^^^^^^^^^^^^^^^^^^ identifier `requestAnimationFrame`. Could not resolve name
    
    node_modules/react-flip-move/src/dom-manipulation.js:152
    152:     [string]: number,
                    ^ Unexpected token ]
    
    node_modules/react-flip-move/src/enter-leave-presets.js:59
     59: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/src/enter-leave-presets.js:61
     61: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/src/enter-leave-presets.js:63
     63: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/src/enter-leave-presets.js:65
     65: // $FlowFixMe
         ^^^^^^^^^^^^^ Error suppressing comment. Unused suppression
    
    node_modules/react-flip-move/src/helpers.js:40
     40: function memoizeString<T>(fn: (string) => T): (string) => T {
                                                ^^ Unexpected token =>
    
    node_modules/react-flip-move/src/prop-converter.js:63
     63:     static defaultProps = {
             ^ Experimental class static field usage. Class static fields are an active early stage feature proposal that may change. You may opt-in to using them anyway in Flow by putting `esproposal.class_static_fields=enable` into the [options] section of your .flowconfig.
    
    node_modules/react-flip-move/src/typings.js:5
      5:   [string]: string,
                  ^ Unexpected token ]
    
    
    Found 34 errors
    
    bug 
    opened by kentcdodds 13
  • Error when setting enterAnimation and leaveAnimation props to false.

    Error when setting enterAnimation and leaveAnimation props to false.

    Hello,

    First off, thank you for your work on this project! I absolutely love it to death.

    I wanted to disable the v2.0 enter/leave animations (I like it but my boss had reservations). When I set the props, to false, I received this error:

    FlipMove.js:438 Uncaught TypeError: Cannot read property 'left' of undefined
    

    Worth noting that it still behaved properly and did disable the animation, but I did encounter this issue.

    bug 
    opened by rubencodes 13
  • Something broken in sizing / position in v2

    Something broken in sizing / position in v2

    Hi! First off, thanks for your work on this project: I added v1.4 to a project at work last week and it's been dynamite. It's wonderful to be able to add such attractive animations to React transitions.

    Here's an example of the widget I've been working on using v1.4 of react-flip-move, working as desired:

    animation-working

    When I tried to upgrade to v2, the positioning / sizing of elements seems to be broken.

    animation-bug

    I don't mean to make you responsible for solving my problem, exactly, but I wondered if it might ring any bells in terms of changes that happened in the move to v2.

    Cheers!

    bug 
    opened by neagle 13
  • Can FlipMove fix the masking problem caused by the incorrect top value?

    Can FlipMove fix the masking problem caused by the incorrect top value?

    Demo: https://codesandbox.io/embed/blissful-golick-86mcsb?fontsize=14&hidenavigation=1&theme=dark

    It may not be a bug, but it looks really strange in fade animation mode.

    I have given my own repair method in the Demo. Can FlipMove directly repair it or is there a more recommended repair method?

    image image

    opened by aweiu 0
  • Using FlipMove with TypeScript functional components

    Using FlipMove with TypeScript functional components

    Hi, I am rendering form elements which are functional components and trying to use FlipMove with them like this:

            <FlipMove>
              {components_length ? getComponents(components, dispatch):null}
            </FlipMove>
    
    

    However I am getting this error:

    TS2769: No overload matches this call.   Overload 1 of 2, '(props: FlipMoveProps | Readonly<FlipMoveProps>): FlipMove', gave the following error.     Type '{ children: FormComponent[] | null; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<FlipMove> & Readonly<FlipMoveProps>'.   Overload 2 of 2, '(props: FlipMoveProps, context: any): FlipMove', gave the following error.     Type '{ children: FormComponent[] | null; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<FlipMove> & Readonly<FlipMoveProps>'
    
    

    Components are dynamic and very complex and I couldn't make example for functional components in read me work in my case. Anyone knows how to solve this issue?

    opened by borgdrone7 2
  • React 18: Console Errors when using Flip Move

    React 18: Console Errors when using Flip Move "Using UNSAFE_componentWillReceiveProps" "findDOMNode is deprecated in StrictMode"

    This seems like things have been deprecated that flipmove is using?

    I'm using React 18

    image

    react_devtools_backend.js:3973 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

    • Move data fetching code or side effects to componentDidUpdate.
    • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

    Please update the following components: FlipMove

    And

    Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of FlipMove which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:

    opened by douglasg14b 3
  • Cannot use FlipMove

    Cannot use FlipMove "No overload matches this call."

    I'm using React 18.

    This is a type error, but if forced to output it actually works just fine. So this component is requiring something that's too narrow? This even occures is I just use a div under it...

    Full Error:

    TS2769: No overload matches this call. Overload 1 of 2, '(props: FlipMoveProps | Readonly): FlipMove', gave the following error. Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'. Overload 2 of 2, '(props: FlipMoveProps, context: any): FlipMove', gave the following error. Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

    Simple use that produces this error:

    <FlipMove>
    	<div></div>
    </FlipMove>
    

    Used like:

    <FlipMove>
    	{songs.map((song) => (
    		<PlaylistSongCard playlist={playlist} song={song} key={song.trackId} />
    	))}
    </FlipMove>
    

    PlaylistSongCard:

    export const PlaylistSongCard = forwardRef(({ playlist, song, style }: Props, ref) => {
    	const isInPlaylist = useIsSongInPlaylist(song.trackId)
    
    	return (
    		<Box ref={ref}>
    			<Card  elevation={3} className={isInPlaylist ? styles['is-in-playlist'] : ''} style={style}>
    				<CardContent sx={{ py: 2, pb: 0, position: 'relative' }} className={styles['pad-bottom']}>
    					<SongCardActionButtons song={song} isInPlaylist={isInPlaylist} />
    					<Grid container sx={{ flexWrap: 'nowrap' }}>
    						<Grid item xs='auto' sx={{ ml: -2, mr: 1, my: -2, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
    							<PlaylistSongCardArrows playlist={playlist} song={song} />
    						</Grid>
    						<Grid item xs='auto' sx={{ display: 'flex', flexGrow: 1, flexShrink: 1, minWidth: 0 }}> {/* https://stackoverflow.com/a/43809765 for minWidth thing */}
    							<Grid item xs={12}>
    								<SongCardBody song={song} />
    							</Grid>
    						</Grid>
    					</Grid>
    				</CardContent>
    			</Card>
    		</Box>
    	)
    })
    
    opened by douglasg14b 2
  • Can't import library in HTML

    Can't import library in HTML

    Hello,

    I'm trying to use this library, but when I import this block of code in my page:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js"
            crossorigin="anonymous"></script>
    

    I'm getting this error in the console:

     Uncaught TypeError: right-hand side of 'in' should be an object, got undefined                                        react-flip-move.js:7:22
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:7
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:4
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:5
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:7
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:4
        <anonymous> https://cdn.jsdelivr.net/npm/[email protected]/dist/react-flip-move.js:5
    

    Br

    opened by vk496 0
Releases(v3.0.3)
  • v3.0.3(Oct 19, 2018)

    Fix to work with styled-components v4

    Patch release to add support for styled-components v4.

    Big thanks to @morleyzhi for their work in this release!

    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Sep 3, 2018)

  • v3.0.1(Jan 30, 2018)

    Fix Typescript bindings

    Quick patch release to fix a bug with Typescript bindings.

    Thanks to @vsaarinen for the PR, and @thupi for letting me know / troubleshooting the issue!

    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Jan 14, 2018)

    Version 3.0

    Switch to Rollup bundler, remove polyfills and deprecations.

    The major feature of this release is size reduction. Gzip size of the module has gone from over 6kb to 4905 bytes (4.79kb). Woohoo!

    The major factor in this reduction was moving from Webpack to Rollup. We were also able to kill some deprecations, which lightened the bundle.

    Breaking changes

    1. Switch from polyfills to helper functions

    Before, we were polyfilling certain array methods: find, every, and isArray. This wasn't ideal, since it meant we could be patching the host application's array methods.

    We still include helper methods to perform these operations, so browser support has not changed. But, if your host application (the code you write) uses the aforementioned array methods, they may suddenly not work in legacy browsers like Internet Explorer, since our polyfills have been removed.

    1. Removed typo animation presets

    If you ask me, "accordion" should really be spelled "accordian". That's how you pronounce it!

    That said, the correct spelling is "accordion". For the presets accordionHorizontal and accordionVertical, we were supporting both variants, but now only the correct spelling will be accepted.

    1. Removed deprecated prop "disableAnimations"

    We renamed the prop disableAnimations to disableAllAnimations. The former will no longer work.


    Thanks a ton to @Andarist for their work contributing all the major parts of this release. Also thanks to @tobilen and @Hypnosphi for reviewing the PRs associated with this release.

    Source code(tar.gz)
    Source code(zip)
  • v2.10.2(Jan 10, 2018)

    Add warning when children are disabled

    In Internet Explorer 11 (and below), the transitonend event will not (consistently) fire for elements that have the disabled attribute. This means the callback for node removal is never fired and the supposedly removed nodes stay in the html.

    Also includes some cleanup, and a move to use cross-env for Windows support.

    Thanks a ton to @tobilen for contributing this release!!

    Source code(tar.gz)
    Source code(zip)
  • v2.10.1(Jan 5, 2018)

    Performance Improvements, typescript type fixes, documentation update

    The largest change in this release is an optimization to batch calls that cause layout recalculation. For large lists, this can improve the performance of the calculations required to begin the animation by a tremendous amount (4x in one recorded instance!).

    This release also features some fixes to the Typescript types, as well as a tweak to the documentation to make it more accurate.

    Huge thanks to @egorshulga, who contributed all of the aforementioned work in this release!

    Source code(tar.gz)
    Source code(zip)
  • v2.10.0(Nov 26, 2017)

    Wrapperless Mode

    Prior to React 16, a React component had to return a single top-level element. This meant that React Flip Move had to wrap its children in a <div> or other HTML node; it couldn't just return the array of children provided to it.

    Happily, React's new reconciliation engine in v16 changes this, and React Flip Move can now be run in "wrapperless" mode, which means that it won't create an additional node.

    To use this new mode, simply set typeName to null.

    There may be some quirks. For example, React Flip Move still needs to position its children to handle leave animations, and so if <FlipMove>'s parent container is set to position: static (the default), you may notice some quirky behaviour. To fix this, just set position: relative (or absolute/fixed) on the parent.

    Huge thanks to @tobilen for their work on this feature, and to @Hypnosphi for reviewing.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.17(Oct 15, 2017)

    Adds support for React 16, and brings the Flip Move dev environment into 2017 🎉 🎉 🎉

    While this sounds like a small change, it's a complete overhaul of the dev dependencies. Our tests and stories have been updated.

    Huge huge thanks to @tobilen for their work on this, and @Hypnosphi for the in-depth reviews. Makes me so happy that there's a community of developers contributing to this project :D

    Source code(tar.gz)
    Source code(zip)
  • v2.9.16(Oct 15, 2017)

    Fix bugs with IE 10 and node type check

    This release includes two bugfixes:

    • Allow FlipMove to work within iFrames (via React 16 portals) - #193
    • Fix issue with IE10 not able to access this.props = #194

    Big thanks to @AlexDunmow and @nicolasraynaud-millevolts for their work on this release! 🎉

    Source code(tar.gz)
    Source code(zip)
  • v2.9.15(Aug 28, 2017)

    Fix zombie nodes (#120) and increase test stability

    This release fixes the often-reported issue with zombie nodes staying after fast toggling. Huge thanks to @tobilen for tackling this problem!!

    This release also includes some improvements to our tests, by polyfilling requestAnimationFrame. Huge thanks to @Hypnosphi for their work on this, and for everything they've done and continue to do for this project :D

    Source code(tar.gz)
    Source code(zip)
  • v2.9.14(Jun 3, 2017)

    Fix Typescript Definitions

    Some fixes to our buggy Typescript stuff in 2.9.13.

    Thanks to @vsaarinen for their work contributing this release :)

    Source code(tar.gz)
    Source code(zip)
  • v2.9.13(May 26, 2017)

  • v2.9.12(May 25, 2017)

    Add Typescript bindings, extract public Flow bindings

    Work to ensure compatibility with Typescript and Flow.

    Thanks to @Hypnosphi for contributing all the work on this release :)

    Source code(tar.gz)
    Source code(zip)
  • v2.9.11(May 17, 2017)

    Fix Preact inconsistencies

    Added additional checks to ensure Flip Move works well with preact-compat. These changes, happily, should reduce bugs and ease maintenance in general, not just for preact.

    Big thanks to @AlexanderOtavka for their work on this release.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.10(May 15, 2017)

    Limit console warnings

    Warnings, like the one given when rendering stateless functional components, would trigger on every re-render, creating a lot of noise when they happen to not be relevant (eg. when using Preact). Warnings will now be limited to once per type. This is a stopgap until we can figure out a better way to handle it.

    Big thanks to @Hypnosphi for their work on this.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.9-beta1(May 11, 2017)

    Internal refactor to use Flow (beta release)

    All primary src files have been type-annotated with Flow. This should be an invisible change to both end users and developers, but because it was a fairly substantial update, it's being trialled as a beta.

    @rhys-vdw @yp @haste @AlexanderOtavka If you guys have a sec, could you please install 2.9.9-beta1 and confirm that everything works properly? :)

    Huge thanks to @Hypnosphi for their work in this update!

    Source code(tar.gz)
    Source code(zip)
  • v2.9.9(May 15, 2017)

    Internal refactor to use Flow

    All primary src files have been type-annotated with Flow. This should be an invisible change to both end users and developers.

    Huge thanks to @Hypnosphi for their work in this update!

    Source code(tar.gz)
    Source code(zip)
  • v2.9.8(May 8, 2017)

  • v2.9.7(May 6, 2017)

    Update dependencies to be more flexible.

    In 2.9.6, we swapped out React.PropTypes for the dedicated prop-types package.

    I realized right after publish that it made more sense to move this dependency to peerDependencies, and to loosen the version restriction to 15.x.x. This way, users can bring their own version, and NPM won't complain if theirs is a patch or minor version off.

    Thanks again to @Hypnosphi for his underlying work on the prop-types conversion.

    Apologies for the rapid-fire releases today!

    Source code(tar.gz)
    Source code(zip)
  • v2.9.6(May 6, 2017)

    Use external prop-types package

    No longer dependent on React.PropTypes, which should quiet the developer warnings for users on React 15.5.x.

    Thanks to @Hypnosphi for their work on this release :)

    (Note: v2.9.5 was a failed release, where the UMD build did not complete successfully)

    Source code(tar.gz)
    Source code(zip)
  • v2.9.4(May 5, 2017)

    Add support for React-like libraries

    Some small tweaks to allow for the subtle internal differences between React and Preact, so that React should be compatible with React-like libraries (Preact, Inferno, etc).

    Big thanks to @AlexanderOtavka for adding this support.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.3(Apr 27, 2017)

    Environment-calculation refactor

    Simple patch change that restructures some of the business of working out what environment FlipMove is running in.

    A tidy side-effect is that FlipMove is smaller now - minified and gzip size went from ~6.3kb to ~5.8kb :zap: :zap: :zap:

    Source code(tar.gz)
    Source code(zip)
  • v2.9.2(Apr 12, 2017)

    Disable dev warnings in production

    Prior to this release, all warnings (such as when SFCs were passed as children, invalid animation presets were used, etc) would log regardless of environment. This patch ensures that these warnings are suppressed when process.env.NODE_ENV is set to "production".

    It also grants a minor perf win, as the check for logging SFC warnings involved iterating through the children. This work is no longer done in production.

    Thanks to @AlexanderOtavka for their contribution!

    Source code(tar.gz)
    Source code(zip)
  • v2.9.1(Feb 18, 2017)

    Documentation tweaks

    Several improvements to the documentation:

    • Added a missing link to enter/leave docs
    • Moved API reference to a separate file (that README was getting long!)
    • Removed explicit version from UMD CDN link
    • Switch to yarn as default installation instruction
    • Switch to JSX code blocks for better markdown syntax highlighting
    • Removed changelog section

    Patch version bump needed to propagate changes to NPM.

    Source code(tar.gz)
    Source code(zip)
  • v2.9.0(Feb 18, 2017)

    Add appearAnimation prop.

    Similar to other animation libraries like ReactCSSTransitionGroup, added an appearAnimation prop that will trigger an on-mount animation, for the initial render.

    Thanks to @deibeljc for implementing this feature.

    Source code(tar.gz)
    Source code(zip)
  • v2.8.0(Jan 27, 2017)

    Add verticalAlignment prop to support bottom-aligned containers

    Formerly, Flip Move leave animations would be wonky if the container's height didn't shrink from the bottom.

    When setting containers with bottom: 0;, the child elements would jump down and fade away from the wrong position.

    This release fixes that. Thanks to @donaldpipowitch for identifying the issue.

    Source code(tar.gz)
    Source code(zip)
  • v2.7.3(Dec 17, 2016)

    Fix bug with disableAllAnimations.

    Thanks to @willemx for supplying a PR that fixed a bug with children not being properly cleared with disableAllAnimations.

    Source code(tar.gz)
    Source code(zip)
  • v2.7.2(Dec 4, 2016)

    Fix crash on frequent enter/leave transitions, remove omit dependency

    This patch includes two small updates:

    • Fix crash when spamming enter/leave animations (https://github.com/joshwcomeau/react-flip-move/pull/111)
    • Replace lodash.omit dependency (https://github.com/joshwcomeau/react-flip-move/pull/110)

    Big thanks to @HenrikJoreteg for replacing lodash.omit and trimming ~6kb from the minified/gzip filesize!

    Source code(tar.gz)
    Source code(zip)
  • v2.7.1(Nov 23, 2016)

    Fix bug with children that render null

    Previously, we fixed an issue with null children:

    <FlipMove>
      {null}
    </FlipMove>
    

    We hadn't accounted, however, for children that render null:

    <FlipMove>
      <CustomComponent />
    </FlipMove>
    
    class CustomComponent extends Component {
      render() {
        return null;
      }
    }
    

    This patch addresses this second case, by avoiding doing any DOM manipulation for elements that don't return a DOM node.

    Source code(tar.gz)
    Source code(zip)
  • v2.7.0(Nov 22, 2016)

    Graceful Animations

    This version includes some improvements to how interrupts are handled. Specifically:

    • In browsers except Firefox, shuffle/reorder interrupts now start from their current position instead of "jumping" to their final position at the start of the new animation. Firefox remains unchanged :(
    • Leave animations no longer restart when the list is updated mid-exit.
    Source code(tar.gz)
    Source code(zip)
Owner
Joshua Comeau
Software developer. Makes stuff.
Joshua Comeau
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 140 Dec 25, 2022
🎰 Library showing animation of number changes in react-native

react-native-animated-numbers Library showing animation of number changes in react-native If you want web version in react.js download react-animated-

ZERO (Yeongsu Han) 212 Dec 29, 2022
🚀 Smooth Liquid Swipe Animation to transition between different components.

?? React LiquidSwipe Very smooth component transition animation with liquid swipe effect. Loved the project? Please consider donating to help it impro

Ashutosh Hathidara 362 Dec 16, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Ashish Yadav 70 Nov 10, 2022
Build custom animation components in React using typescript

Build custom animation components in React using typescript

Hoa Xuan Vo 3 May 6, 2022
Use-step-animation - Custom hook used to make sequence of animations using positions more easily

use-step-animation Custom hook used to make sequence of animations using positio

Lucas Alexander Floriani 11 Jan 8, 2022
Track the position of DOM elements. Create cool animations.

react-track Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a wa

Gil Birman 340 Oct 6, 2022
An easy way to perform animations when a React component enters or leaves the DOM

react-transition-group ATTENTION! To address many issues that have come up over the years, the API in v2 and above is not backwards compatible with th

React Community 9.6k Jan 5, 2023
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Rares Mardare 74 Oct 3, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

HyperFuse 1.5k Jan 2, 2023
A spring that solves your animation problems.

React-Motion import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div

Cheng Lou 21.3k Jan 3, 2023
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 24.7k Jan 7, 2023
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Framer 17.1k Jan 3, 2023
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Charles King 294 Dec 2, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 561 Dec 24, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

plus1.tv 1.5k Dec 19, 2022
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Nikita Butenko 1.1k Dec 31, 2022
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

Damian Głuch 0 Dec 2, 2022
⚛️ Perform animation and transition of React component with ease.

⚛️ Perform animation and transition of React component with ease.

Zheng Song 232 Dec 28, 2022