How To Use React Transitionmotion Willenter()

Using React Motion's TransitionMotion, I want to animate 1 or more boxes in and out. When a box enters the view, it's width and height should go from 0 pixels to 200 pixels and it'

Solution 1:

As per the documentation of styles under the TransitionMotion section (and I don't claim to have understood all of it entirely :)):

styles: ... an array of TransitionStyle ...

The key thing to note here is that there are 2 types of style objects that this library deals with (or at least this TransitionMotion part of it) and it calls them TransitionStyle and TransitionPlainStyle.

The previous values passed into styles attribute were of TransitionPlainStyle. Changing them to TransitionStylemagically starts animating the Enter sequence.

You can read more about 2 different types mentioned above over here.

styles={this.state.items.map(item=>({key:item.key,style: {
    width:spring(item.width), 
    height:spring(item.height),
    opacity:spring(item.opacity)
  }
}))}

Forked codepen demo.

Again, I do not fully understand the inner workings of it just yet. I just know that your styles had to be changed in the above way to make it work.

I will be happy if someone can educate me on this as well.

Hope this helps.