search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.07k stars 259 forks source link

Transform Scale proposal #113

Open Freddy03h opened 7 years ago

Freddy03h commented 7 years ago

Hi! I really like <FlipMove>, I already push it on production and work like a charm. I knew the FLIP technique before using your lib, and I tried to do my own. But, managing the domNode deletion and the relativeBoxModel isn't easy. So I adopted react-flip-move !

I think it's really close to successfully manage transform scale for some use cases ! I don't think it's a good idea to activate scale transformation for all animations. On a List of Items, it's not efficient, but, for the nodes of an Item, it can be really cool !

I forked the lib and tried to do this task on a new storybook that you'll find here : https://github.com/Freddy03h/react-flip-move/commit/f5e9002afc905cbb6bf6ced13f0dfb50e8e6a053 I didn't create a pull request because I don't think it's ready, and also I commented on parts I'm not sure about.

joshwcomeau commented 7 years ago

Hi @Freddy03h!

This is awesome. That demo is incredible!

The biggest issue with FlipMove right now is stability. It works great for most usecases but enter/leave animations can cause problems when they happen too quickly and interrupt each other.

This gives me the idea that this could be used to tackle enter/leave animations. It's bothered me for a long time that they're "special": Ideally they should all be handled by the exact same process, and this change could enable us to use scale (and opacity) to handle enter/leave.

Anyway, thanks for the proposal :) Your implementation makes sense to me so far, and I think having a prop to enable it is the right way to go. Let me know how you'd like to proceed - I'd be happy to answer any questions so you can continue developing the feature, or I can add this to my list to tackle at some point.

Freddy03h commented 7 years ago

Interruption can be hard indeed, and I don't think it will be possible with pure css animation or transition. With Web Animation API it's possible to pause the animation, but I don't know if it's possible to get the real transform of the stopped item. The goal is to calculate the 'First' using the classic getBoundingClientRect and the current 'graphic' position by getting the calculated transform.

For enter and leave animation declaration, what do you think of this :

const customEnterAnimation = {
  default: {
    from: { transform: 'scale(0.5, 1)' },
    to:   { transform: 'scale(1, 1)' },
  },
  layer: {
    from: { transform: 'scale(0.3)' },
    to:   { transform: 'scale(1)' },
  }
};

<FlipMove enterAnimation={customEnterAnimation}>
  {renderChildren()}
</FlipMove>

default option for not explicitly define animations of all items individually. And also keep the actual behaviour, but it mean that is a breaking change…

For you, what is missing to be implemented in the library ? I don't know if the lib have to set the transform-origin of items or not for example, what do you think of it ?

joshwcomeau commented 7 years ago

Hi @Freddy03h,

I'm not sure that I follow what the difference is between default and layer. Is the idea that you'd be able to specify the key of a given child?

And yeah I think we can probably save enter/leave scale handling for later, I was mostly just thinking out loud haha.

I don't think FlipMove should worry about transform-origin, since different circumstances will want it to be handled differently. The example you provided is fairly complex, with the sliding text; we should get a more simple example that just scales the items when you click on them.

As for what's missing: