{"action":"closed","issue":{"url":"https://api.github.com/repos/react-spring/react-spring/issues/667","repository_url":"https://api.github.com/repos/react-spring/react-spring","labels_url":"https://api.github.com/repos/react-spring/react-spring/issues/667/labels{/name}","comments_url":"https://api.github.com/repos/react-spring/react-spring/issues/667/comments","events_url":"https://api.github.com/repos/react-spring/react-spring/issues/667/events","html_url":"https://github.com/react-spring/react-spring/issues/667","id":441895705,"node_id":"MDU6SXNzdWU0NDE4OTU3MDU=","number":667,"title":"(Reverse) Trail items lose their individual offsets on reverse animation.","user":{"login":"Schmerb","id":18368207,"node_id":"MDQ6VXNlcjE4MzY4MjA3","avatar_url":"https://avatars3.githubusercontent.com/u/18368207?v=4","gravatar_id":"","url":"https://api.github.com/users/Schmerb","html_url":"https://github.com/Schmerb","followers_url":"https://api.github.com/users/Schmerb/followers","following_url":"https://api.github.com/users/Schmerb/following{/other_user}","gists_url":"https://api.github.com/users/Schmerb/gists{/gist_id}","starred_url":"https://api.github.com/users/Schmerb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Schmerb/subscriptions","organizations_url":"https://api.github.com/users/Schmerb/orgs","repos_url":"https://api.github.com/users/Schmerb/repos","events_url":"https://api.github.com/users/Schmerb/events{/privacy}","received_events_url":"https://api.github.com/users/Schmerb/received_events","type":"User","site_admin":false},"labels":[{"id":859311604,"node_id":"MDU6TGFiZWw4NTkzMTE2MDQ=","url":"https://api.github.com/repos/react-spring/react-spring/labels/bug","name":"bug","color":"d73a4a","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/react-spring/react-spring/milestones/1","html_url":"https://github.com/react-spring/react-spring/milestone/1","labels_url":"https://api.github.com/repos/react-spring/react-spring/milestones/1/labels","id":4250385,"node_id":"MDk6TWlsZXN0b25lNDI1MDM4NQ==","number":1,"title":"v9.0.0","description":null,"creator":{"login":"aleclarson","id":1925840,"node_id":"MDQ6VXNlcjE5MjU4NDA=","avatar_url":"https://avatars2.githubusercontent.com/u/1925840?v=4","gravatar_id":"","url":"https://api.github.com/users/aleclarson","html_url":"https://github.com/aleclarson","followers_url":"https://api.github.com/users/aleclarson/followers","following_url":"https://api.github.com/users/aleclarson/following{/other_user}","gists_url":"https://api.github.com/users/aleclarson/gists{/gist_id}","starred_url":"https://api.github.com/users/aleclarson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aleclarson/subscriptions","organizations_url":"https://api.github.com/users/aleclarson/orgs","repos_url":"https://api.github.com/users/aleclarson/repos","events_url":"https://api.github.com/users/aleclarson/events{/privacy}","received_events_url":"https://api.github.com/users/aleclarson/received_events","type":"User","site_admin":false},"open_issues":3,"closed_issues":21,"state":"open","created_at":"2019-04-23T03:13:14Z","updated_at":"2019-06-09T18:47:52Z","due_on":null,"closed_at":null},"comments":3,"created_at":"2019-05-08T19:33:20Z","updated_at":"2019-06-09T18:47:52Z","closed_at":"2019-06-09T18:47:51Z","author_association":"NONE","body":"## 🐛 Bug Report\r\n\r\nWhen using the `Trail` render-prop to animate a list of items, everything works as expected until reversing the animation via `reverse={toggle}` prop. This does appear to reverse the order of animation; however, the offset between each item is so minimal that it almost appears to close all items synchronously. \r\n\r\nDefault order (`reverse={false}`) -->  items animate in with offsets as expected\r\n\r\nReverse order (`reverse={true}`) --> items appear to animate out all at the same time with very minimal offsets, if any. \r\n\r\n## To Reproduce\r\n\r\nSteps to reproduce the behavior:\r\n\r\nCreate a simple `Trail` component and toggle the reverse prop on animation close. \r\n\r\n```   \r\nconst items = [...]\r\n const DX = 40;\r\n<Trail\r\n          native\r\n          reverse={!toggle}\r\n          config={config.stiff}\r\n          initial={null}\r\n          items={items}\r\n          keys={item => item.key}\r\n          from={{ opacity: 0, x: -DX }}\r\n          to={{ opacity: toggle ? 1 : 0.25, x: toggle ? 0 : DX }}\r\n        >\r\n          {item => ({ x, opacity }) => (\r\n            <animated.div\r\n              style={{\r\n                opacity,\r\n                transform: x.interpolate(x => `translate3d(${x}px,0,0)`),\r\n              }}\r\n            >\r\n              {item}\r\n            </animated.div>\r\n          )}\r\n        </Trail>\r\n```\r\n\r\n## Expected behavior\r\n\r\nThe `Trail` items should animate out in *reverse* order but with the same offsets between each item as when they enter. \r\n\r\n## Link to repro \r\n\r\n[CodeSandbox Bug Demo](https://codesandbox.io/s/oqrolk2055) \r\n\r\n## Environment\r\n\r\n- `react-spring` v8.0.20\r\n- `react` v16.8.x (or `react-native` v0.58.x)\r\n"}}
{"actor":{"display_login":"aleclarson"}}