How to integrate with React-Motion for animation? about react-faux-dom HOT 4 CLOSED

Oh, that's a cool library! I haven't put a huge amount of thought into animations yet, partially because I simply don't need them but also because I was confident that there would be a great React way of doing it.

The bottom line is that we can't use D3s transitions because they involve timeouts and state, which obviously doesn't work unless tightly integrated into React.

This approach looks great and should work fine. I haven't tried it but this should work.

function renderBox(interpolated) {
  // Create your element.
  var el = ReactFauxDOM.createElement('div')

  el.style.setProperty('color', 'red')
  el.setAttribute('class', 'box')
  el.setAttribute('transform', `translate3d(${interpolated.val}px, 0, 0)`)

  return el.toReact()
}

return (
  <Spring defaultValue={{val: 0}} endValue={{val: this.state.open ? 400 : 0}}>
      {interpolated =>
          {renderBox(interpolated)}
      }
  </Spring>
)

Because it returns react elements you can return the result of el.toReact() into any part of a React tree. This should work beautifully!

An addition to react-faux-dom that would make this even better would be allowing you to perform el.appendChild etc with functions or React components that are yet to be instantiated. So you could call createElement(Spring), modify it, add a child div with properties and then render it.

Not sure how you'd get the interpolated value though, it looks like you need to set the Spring elements children array to a function. The example I gave should do the trick though :)

I'd love to know if this works well for you or not. Animations have been playing on my mind.

from react-faux-dom.

Thank you for response. But the code does not work.

Uncaught Error: Invariant Violation: Spring.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

from react-faux-dom.

actually we do not need { } in

{interpolated =>
  {renderBox(interpolated)}
}

the following works

{interpolated =>
  renderBox(interpolated)
}

Thank you very much. @Olical

renderChart : function(interpolated){
    var el = ReactFauxDOM.createElement('div');
    el.style.setProperty('backgroundColor', 'red')
    el.setAttribute('class', 'button')
    el.style.setProperty('height', '50px')
    el.style.setProperty('border','border:5px solid red')
    el.style.setProperty('width', `${interpolated.val}` + "px")
    return el.toReact()
},
render:function() {    
   return (
     <Spring defaultValue={{val: 0}} endValue={{val:  800 }}>
        {interpolated =>    
          this.renderChart(interpolated)
        }
     </Spring>
    )
}

from react-faux-dom.

I didn't get a notification for this (that's been happening a lot recently!) but that's excellent. I hope it's working well for you. Do you get a smooth experience?

Also you can set style using a full inline style string now, like these new tests. I think you can just set an object too. Just a heads up :)

from react-faux-dom.