{"action":"created","issue":{"url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/26","labels_url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/26/comments","events_url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/26/events","html_url":"https://github.com/twitter-fabric/velocity-react/issues/26","id":110103141,"number":26,"title":"chaining with react components","user":{"login":"larryhengl","id":2637196,"avatar_url":"https://avatars.githubusercontent.com/u/2637196?v=3","gravatar_id":"","url":"https://api.github.com/users/larryhengl","html_url":"https://github.com/larryhengl","followers_url":"https://api.github.com/users/larryhengl/followers","following_url":"https://api.github.com/users/larryhengl/following{/other_user}","gists_url":"https://api.github.com/users/larryhengl/gists{/gist_id}","starred_url":"https://api.github.com/users/larryhengl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/larryhengl/subscriptions","organizations_url":"https://api.github.com/users/larryhengl/orgs","repos_url":"https://api.github.com/users/larryhengl/repos","events_url":"https://api.github.com/users/larryhengl/events{/privacy}","received_events_url":"https://api.github.com/users/larryhengl/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-06T21:16:42Z","updated_at":"2015-10-07T14:00:35Z","closed_at":"2015-10-07T14:00:35Z","body":"Hey Folks, this looks interesting, nice work!\r\n\r\nHow would you recommend chaining velocity animations across components (sync or async)?  For example,\r\n1 Component on left side of page, 2 Components stacked on right side:\r\n\r\n| Comp1 | Comp2 |\r\n| ---------- | --------- |\r\n| | **Comp3** |\r\n\r\npseudo...\r\n```javascript\r\n<div id=left>\r\n  <Comp1 />\r\n</div>\r\n<div id=right>\r\n  <Comp2 />\r\n  <Comp3 />\r\n</div>\r\n``` \r\n\r\nI would like to fadeIn/Out Comp1 on a button click.  When fading I would also like to fade or slide the right side to full width, sorta like your typical slideout menu effect.  \r\n\r\nI also want to fadeIn/Out Comp2 on a button click, and nicely slide or fade Comp3 in its place.\r\n\r\nSo far using bootstrap grid classes for spacing, but the collapsing effects are still too sudden.\r\nFor example, I fadeOut Comp1, and apply the class col-md-12 to Comp2 and Comp3. But the class is applied by state change outside of the VelocityComponent, so the right side drops below the left side until the animation is done.  Icky. Was thinking fade both sides out, then fade right side back in.\r\n\r\npseudo...\r\n```javascript\r\n<VelocityComponent>\r\n  <div id=left>\r\n    <Comp1 />\r\n  </div>\r\n<VelocityComponent />\r\n<VelocityComponent>\r\n  <div id=right>\r\n    <VelocityComponent>\r\n      <Comp2 />\r\n    <VelocityComponent />\r\n    <VelocityComponent>\r\n      <Comp3 />\r\n    <VelocityComponent />\r\n </div>\r\n<VelocityComponent />\r\n``` \r\n\r\nThe Velocity docs show chaining but for jquery methods, not React.  And the TransitionGroup example seems to show animation sequences applied to one component only, not across sibling components...based on my noob understanding.\r\n\r\nThoughts?\r\n\r\nCheers,\r\n:Larry\r\n"},"comment":{"url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/comments/146203926","html_url":"https://github.com/twitter-fabric/velocity-react/issues/26#issuecomment-146203926","issue_url":"https://api.github.com/repos/twitter-fabric/velocity-react/issues/26","id":146203926,"user":{"login":"phopkins","id":260837,"avatar_url":"https://avatars.githubusercontent.com/u/260837?v=3","gravatar_id":"","url":"https://api.github.com/users/phopkins","html_url":"https://github.com/phopkins","followers_url":"https://api.github.com/users/phopkins/followers","following_url":"https://api.github.com/users/phopkins/following{/other_user}","gists_url":"https://api.github.com/users/phopkins/gists{/gist_id}","starred_url":"https://api.github.com/users/phopkins/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/phopkins/subscriptions","organizations_url":"https://api.github.com/users/phopkins/orgs","repos_url":"https://api.github.com/users/phopkins/repos","events_url":"https://api.github.com/users/phopkins/events{/privacy}","received_events_url":"https://api.github.com/users/phopkins/received_events","type":"User","site_admin":false},"created_at":"2015-10-07T14:00:35Z","updated_at":"2015-10-07T14:00:35Z","body":"I think the best way to achieve a \"chaining\" effect with these components is to just use a `delay` on the 2nd animation that matches the `duration` of the first. (You can use a constant or something to keep the 2 values in sync.)\r\n\r\nFor your problems above, you need to decide whether you're doing your widths in JS with styles/animations or in CSS with classes. Mixing the 2 will likely give you popping issues like you describe. (You may want to consider CSS `transition`s, for example, which should play well with the classes.)\r\n\r\nNot sure what you're trying to achieve on the right side, but bear in mind that if 2 elements need to take up the same space, absent negative margin shenanigans you'll need some amount of absolute positioning. The `LoadingCrossfadeComponent` in the demo code may give you an effect you want, though bear in mind it can be slightly finicky to get working.\r\n\r\n\r\n(Closing this as it is not an issue in `velocity-component`)\r\n\r\n"}}