{"action":"opened","issue":{"url":"https://api.github.com/repos/joshwcomeau/react-flip-move/issues/128","repository_url":"https://api.github.com/repos/joshwcomeau/react-flip-move","labels_url":"https://api.github.com/repos/joshwcomeau/react-flip-move/issues/128/labels{/name}","comments_url":"https://api.github.com/repos/joshwcomeau/react-flip-move/issues/128/comments","events_url":"https://api.github.com/repos/joshwcomeau/react-flip-move/issues/128/events","html_url":"https://github.com/joshwcomeau/react-flip-move/issues/128","id":207669043,"number":128,"title":"Beefing up the customization of the enter and leave animations","user":{"login":"deibeljc","id":10842162,"avatar_url":"https://avatars.githubusercontent.com/u/10842162?v=3","gravatar_id":"","url":"https://api.github.com/users/deibeljc","html_url":"https://github.com/deibeljc","followers_url":"https://api.github.com/users/deibeljc/followers","following_url":"https://api.github.com/users/deibeljc/following{/other_user}","gists_url":"https://api.github.com/users/deibeljc/gists{/gist_id}","starred_url":"https://api.github.com/users/deibeljc/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/deibeljc/subscriptions","organizations_url":"https://api.github.com/users/deibeljc/orgs","repos_url":"https://api.github.com/users/deibeljc/repos","events_url":"https://api.github.com/users/deibeljc/events{/privacy}","received_events_url":"https://api.github.com/users/deibeljc/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-02-14T23:38:21Z","updated_at":"2017-02-14T23:38:21Z","closed_at":null,"body":"Currently I have requirements that require a slightly more complex animation case than is currently supported. I have to have a linear delay stagger (supported) but also an \"exponential\" (more on this later) duration stagger. Another thing that I needed was to have separate timings for opacity and transform.\r\n\r\n\r\n\"Exponential\" duration\r\n---\r\nWhat \"exponential\" duration stagger actually means is is duration per element increases. I am using the term exponential because my motion designer called it that!\r\n\r\nSo the duration would look like\r\n\r\n- List\r\n  - Item : duration 350ms\r\n  - Item : duration 400ms\r\n  - Item : duration 500ms\r\n  - Item : duration 550ms\r\n  - Item : duration 550ms | We defined a hard cap at 550ms so it doesn't get stupid long for lists\r\n\r\nThe API I have built in currently looks like this for the exponentialDuration\r\n\r\n```js\r\nconst customEnterAnimation = {\r\n  from: { transform: 'translateY(100%)', opacity: 0 },\r\n  to: { transform: 'translateY(0%)', opacity: 1 }\r\n}\r\n\r\nconst customExitAnimation = {\r\n  from: { transform: 'translateY(0%)', opacity: 1 },\r\n  to: { transform: 'translateY(-100%)', opacity: 0 }\r\n}\r\n\r\n<FlipMove\r\n  staggerDurationBy={this.state.stagDurBy}\r\n  onFinishAll={this.handleFinishAll}\r\n  staggerDelayBy={this.state.stagDurBy}\r\n  exponentialDuration={true}\r\n  exponentialDurationCap={500}\r\n  enterAnimation={customEnterAnimation}\r\n  leaveAnimation={customExitAnimation}\r\n  duration={350}\r\n  easing={this.state.easing}\r\n>\r\n```\r\n\r\nMy code changes are [here](https://github.com/deibeljc/react-flip-move/blob/finetune-animation-control/src/dom-manipulation.js#L220). And they are certainly not final as the API is totally arbitrary currently\r\n\r\nSeparate Timings\r\n---\r\nFor this I needed to define a custom duration for both the opacity and the transform property because the opacity needed to be done in a flat 100ms whereas the transform had 350ms+ (depending on the exponential stagger) to finish. In order to do that I decided that the best way to succinctly send this info in would be to describe it in an object that is sent down via props.\r\n\r\n```js\r\nconst customDuration = {\r\n  transform: {\r\n    duration: 350,\r\n    stagger: true\r\n  },\r\n  opacity: {\r\n    duration: 100,\r\n    stagger: false\r\n  }\r\n}\r\n```\r\n\r\nRight now I am sending it down via the prop customDuration but I think it probably makes more sense to just have duration accept an object.\r\n\r\nWhen adding that change I dealt with not cleaning up the child element by waiting for the longest duration animation to complete. See [findLongestTransitionProperty](https://github.com/deibeljc/react-flip-move/blob/finetune-animation-control/src/FlipMove.js#L315) and my changes in the [transitionEndHandler](https://github.com/deibeljc/react-flip-move/blob/finetune-animation-control/src/FlipMove.js#L344)\r\n\r\nP.S. Sorry this issue turned into a giant post!"}}
{"actor":{"display_login":"deibeljc"}}