{"action":"closed","issue":{"url":"https://api.github.com/repos/facebook/react-native/issues/456","labels_url":"https://api.github.com/repos/facebook/react-native/issues/456/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react-native/issues/456/comments","events_url":"https://api.github.com/repos/facebook/react-native/issues/456/events","html_url":"https://github.com/facebook/react-native/issues/456","id":65090211,"number":456,"title":"[Animation] Examples?","user":{"login":"nextriot","id":711457,"avatar_url":"https://avatars.githubusercontent.com/u/711457?v=3","gravatar_id":"","url":"https://api.github.com/users/nextriot","html_url":"https://github.com/nextriot","followers_url":"https://api.github.com/users/nextriot/followers","following_url":"https://api.github.com/users/nextriot/following{/other_user}","gists_url":"https://api.github.com/users/nextriot/gists{/gist_id}","starred_url":"https://api.github.com/users/nextriot/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nextriot/subscriptions","organizations_url":"https://api.github.com/users/nextriot/orgs","repos_url":"https://api.github.com/users/nextriot/repos","events_url":"https://api.github.com/users/nextriot/events{/privacy}","received_events_url":"https://api.github.com/users/nextriot/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":10,"created_at":"2015-03-29T19:58:48Z","updated_at":"2015-05-31T18:10:09Z","closed_at":"2015-05-31T18:10:09Z","body":"Hi guys:\r\n\r\nAwesome work on this. Absolutely in lust right now.\r\n\r\nI've been trying to wrap my head around doing animations, from what I've gathered POP is leveraged for all animation work, which I'm not familiar with, perhaps that's my shortcoming.\r\n\r\nI'm trying some basic animations from other examples I've scouted throughout the repo and using this file for potential properties to animate: [PopAnimation.js] (https://github.com/facebook/react-native/blob/0c83766e3b7d17674954bacf9ccc308d4dd4b2b3/Libraries/BatchedBridge/BatchedBridgedModules/POPAnimation.js)\r\n\r\n```jsx\r\ngetInitialState: function() {\r\n  return {\r\n    isAnimating: true\r\n  }\r\n},\r\n\r\ntoggleScale: function() {\r\n  this.setState({\r\n    isAnimating: !this.state.isAnimating\r\n  });\r\n\r\n  Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {\r\n    scaleXY: this.state.isAnimating ? [2.0, 2.0] : [0.5, 0.5],\r\n  });\r\n},\r\n\r\nrender: function() {\r\n  return (\r\n\r\n        <TouchableHighlight style={styles.container} underlayColor='#99d9f4' onPress={() => this.toggleScale()}>\r\n          <View>\r\n            <Text style={styles.text}>\r\n              Click here to start animation!\r\n            </Text>\r\n            <View ref='this' style={styles.box}/>\r\n          </View>\r\n        </TouchableHighlight>\r\n  );\r\n}\r\n```\r\n\r\nWith a property such as `opacity` this seems to work fine: click once - hidden, click again - shown. However, `scaleXY` doesn't commit its animation, i.e. after the animation happens it then jumps back to it's original state, which sort of makes sense as Cocoa Touch has the same implementation and forces you to set the final state in a block / closure after the animation. But given opacity's behaviour I'm not sure why this acts differently.\r\n\r\nAlso I've no clue how to animate positions, or even which value to animate positions with: `positionX` or `translationX`?\r\n\r\nAre there any examples which show a simple, 'from -> to' animation. e.g. `on press move this box from posA to posB and commit the animation`?\r\n\r\nAmazing stuff again. Very much looking forward to Nuclide to make this all a little easier."}}