{"action":"created","issue":{"url":"https://api.github.com/repos/ashaffer/vdux/issues/11","labels_url":"https://api.github.com/repos/ashaffer/vdux/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/ashaffer/vdux/issues/11/comments","events_url":"https://api.github.com/repos/ashaffer/vdux/issues/11/events","html_url":"https://github.com/ashaffer/vdux/issues/11","id":124469072,"number":11,"title":"[Discussion] How to implement (performant) animations","user":{"login":"queckezz","id":2580598,"avatar_url":"https://avatars.githubusercontent.com/u/2580598?v=3","gravatar_id":"","url":"https://api.github.com/users/queckezz","html_url":"https://github.com/queckezz","followers_url":"https://api.github.com/users/queckezz/followers","following_url":"https://api.github.com/users/queckezz/following{/other_user}","gists_url":"https://api.github.com/users/queckezz/gists{/gist_id}","starred_url":"https://api.github.com/users/queckezz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/queckezz/subscriptions","organizations_url":"https://api.github.com/users/queckezz/orgs","repos_url":"https://api.github.com/users/queckezz/repos","events_url":"https://api.github.com/users/queckezz/events{/privacy}","received_events_url":"https://api.github.com/users/queckezz/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":26,"created_at":"2015-12-31T13:02:27Z","updated_at":"2016-01-29T21:16:36Z","closed_at":null,"body":"I'm trying to recreate the material design ripple effect with canvas and vdux. The actual code for the effects works just fine and now I need to wire it with vdux. So basically I create an initial array for all effects currently happening in the canvas via `virtex-local`:\r\n\r\n```js\r\nconst initialState = () => ({\r\n  ripples: []\r\n})\r\n```\r\n\r\nAdding a new ripple effect is pretty easy, do some math based on the canvas element and the coordinates of the click and finally dispatch an action.\r\n\r\n```js\r\nconst render = () => {\r\n  let canvas\r\n\r\n  return (\r\n    <button class={buttonStyle} onClick={e => {\r\n      const { x, y, scaleRatio } = computeScaleRatio(e)\r\n      return local(addRipple)({\r\n        x,\r\n        y,\r\n        scaleRatio\r\n      })\r\n    }}>\r\n      Click to Ripple\r\n\r\n      <canvas\r\n        class={canvasStyle}\r\n        style={{ width: percent(100), height: percent(100) }}\r\n        hook={ el => canvas = el}}\r\n      >\r\n      </canvas>\r\n    </button>\r\n  )\r\n}\r\n```\r\n\r\nWith the corresponding reducer you will now have `state.ripples` available. So now comes the tricky part. I need to start the actual canvas render loop.\r\n\r\n```js\r\nconst render = ({ state }) => {\r\n  state.ripples.length != 0 && startAnimation(state.ripple)\r\n}\r\n```\r\n\r\nHow do I remove the ripple effects from the array again when there finished animating? there is no way to dispatch an action again.\r\n\r\n```js\r\nconst startAnimation = (ripples) => {\r\n  // start animation\r\n  // at some point remove ripples from the array\r\n  setTimeout() => local(removeRipple(ripple[i])), 750)\r\n}\r\n```\r\n\r\nMaybe virtex-local is not the right tool for that? I thought it would be extremely convenient, if we already have a state managment system available, to also use it for animations."},"comment":{"url":"https://api.github.com/repos/ashaffer/vdux/issues/comments/176972360","html_url":"https://github.com/ashaffer/vdux/issues/11#issuecomment-176972360","issue_url":"https://api.github.com/repos/ashaffer/vdux/issues/11","id":176972360,"user":{"login":"anthonyshort","id":36125,"avatar_url":"https://avatars.githubusercontent.com/u/36125?v=3","gravatar_id":"","url":"https://api.github.com/users/anthonyshort","html_url":"https://github.com/anthonyshort","followers_url":"https://api.github.com/users/anthonyshort/followers","following_url":"https://api.github.com/users/anthonyshort/following{/other_user}","gists_url":"https://api.github.com/users/anthonyshort/gists{/gist_id}","starred_url":"https://api.github.com/users/anthonyshort/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/anthonyshort/subscriptions","organizations_url":"https://api.github.com/users/anthonyshort/orgs","repos_url":"https://api.github.com/users/anthonyshort/repos","events_url":"https://api.github.com/users/anthonyshort/events{/privacy}","received_events_url":"https://api.github.com/users/anthonyshort/received_events","type":"User","site_admin":false},"created_at":"2016-01-29T21:16:36Z","updated_at":"2016-01-29T21:16:36Z","body":"Oh nice. I'm going to dig into this tonight and see how it works :)"}}