{"action":"created","issue":{"url":"https://api.github.com/repos/drcmda/react-spring/issues/160","repository_url":"https://api.github.com/repos/drcmda/react-spring","labels_url":"https://api.github.com/repos/drcmda/react-spring/issues/160/labels{/name}","comments_url":"https://api.github.com/repos/drcmda/react-spring/issues/160/comments","events_url":"https://api.github.com/repos/drcmda/react-spring/issues/160/events","html_url":"https://github.com/drcmda/react-spring/issues/160","id":343816682,"node_id":"MDU6SXNzdWUzNDM4MTY2ODI=","number":160,"title":"Play short animation on component update","user":{"login":"Kadrian","id":1403093,"node_id":"MDQ6VXNlcjE0MDMwOTM=","avatar_url":"https://avatars2.githubusercontent.com/u/1403093?v=4","gravatar_id":"","url":"https://api.github.com/users/Kadrian","html_url":"https://github.com/Kadrian","followers_url":"https://api.github.com/users/Kadrian/followers","following_url":"https://api.github.com/users/Kadrian/following{/other_user}","gists_url":"https://api.github.com/users/Kadrian/gists{/gist_id}","starred_url":"https://api.github.com/users/Kadrian/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Kadrian/subscriptions","organizations_url":"https://api.github.com/users/Kadrian/orgs","repos_url":"https://api.github.com/users/Kadrian/repos","events_url":"https://api.github.com/users/Kadrian/events{/privacy}","received_events_url":"https://api.github.com/users/Kadrian/received_events","type":"User","site_admin":false},"labels":[{"id":859311608,"node_id":"MDU6TGFiZWw4NTkzMTE2MDg=","url":"https://api.github.com/repos/drcmda/react-spring/labels/enhancement","name":"enhancement","color":"a2eeef","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":14,"created_at":"2018-07-23T22:20:36Z","updated_at":"2018-07-30T04:59:25Z","closed_at":null,"author_association":"NONE","body":"Hi. I've been trying to figure out a simple case:\r\n\r\nHow to make an element \"jump\" (scale from 1.0 to 1.1 and back to 1.0), every time it re-renders (initial render, and every time a certain prop changes)? Let's say, a \"jumping counter\".\r\n\r\nIs there any simple case like this? Couldn't figure out how to map Transitions, Springs and Keyframes to this.\r\n\r\nThis is the furthest I can make it: https://codesandbox.io/s/v8zxlw0q47\r\n\r\nProblems that I can't figure out:\r\n\r\n- Is `Keyframes` the right thing to use?\r\n- How to replay the animation every time the counter is updated?\r\n- How to make the transition faster? Using a `config` or with a specific `delay`?\r\n- Should I use `async` + `call` or just an array?\r\n- Should I use this `reset` property of the Spring somehow?"},"comment":{"url":"https://api.github.com/repos/drcmda/react-spring/issues/comments/408747248","html_url":"https://github.com/drcmda/react-spring/issues/160#issuecomment-408747248","issue_url":"https://api.github.com/repos/drcmda/react-spring/issues/160","id":408747248,"node_id":"MDEyOklzc3VlQ29tbWVudDQwODc0NzI0OA==","user":{"login":"drcmda","id":2223602,"node_id":"MDQ6VXNlcjIyMjM2MDI=","avatar_url":"https://avatars0.githubusercontent.com/u/2223602?v=4","gravatar_id":"","url":"https://api.github.com/users/drcmda","html_url":"https://github.com/drcmda","followers_url":"https://api.github.com/users/drcmda/followers","following_url":"https://api.github.com/users/drcmda/following{/other_user}","gists_url":"https://api.github.com/users/drcmda/gists{/gist_id}","starred_url":"https://api.github.com/users/drcmda/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/drcmda/subscriptions","organizations_url":"https://api.github.com/users/drcmda/orgs","repos_url":"https://api.github.com/users/drcmda/repos","events_url":"https://api.github.com/users/drcmda/events{/privacy}","received_events_url":"https://api.github.com/users/drcmda/received_events","type":"User","site_admin":false},"created_at":"2018-07-30T04:59:25Z","updated_at":"2018-07-30T04:59:25Z","author_association":"OWNER","body":"@Kadrian \r\n\r\n1. Yes, it works like that\r\n2. You only need to interpolate if you use a native spring, the value you receive in the render function is not a number but a class, you can console.log it. You can't drop a class into reacts style-prop. This is exactly what animated.div is there for. When you use native the component will render only once instead of thousands of times. Again, log it and you'll see the difference: \r\n\r\n    <Counter native>{props => console.log(props) || <animated.div .....\r\n\r\n> Should I use Keyframes?\r\n\r\nFor this case i think so\r\n\r\nShould I use Spring or Transition?\r\n\r\nSpring can't run arrays, Transition only tracks lifecycles\r\n\r\nHow to trigger the animation? (immediate: true? other ways?)\r\n\r\nIf you use an array or function as the argument to keyframes instead of an object with slots it starts by itself, it doesn't need a \"state\" prop to trigger.\r\n\r\nShould I use the reset property or reset the animation with some \"state\" or some other way?\r\n\r\n> reset means the animation starts from scratch. Without this the animation stays put because nothing changes, you don't supply it with a new state or slot. Using reset instead of re-keying it is faster.\r\n\r\nShould I use async call or is the array syntax ok?\r\n\r\nArray is shorter\r\n\r\nShould I use an animated.div? Why?\r\n\r\nRead this: https://github.com/drcmda/react-spring/blob/master/API-OVERVIEW.md#native-rendering-and-interpolation-demo"}}
{"actor":{"display_login":"drcmda"}}