vis-continuity-component.md

Visual continuity component

This is a concept in material design that helps define meaningful and easy to follow transitions in user interfaces

I had the idea to do this transition in react components. The basics of the transition is to take a piece of ui and transfer it over to the new state of the ui without losing some type of visual que of the element that is shared.

Intergration with react.

Pesuado code.

return (
  <div>
    <VisCont context={this} originRef='component1' targetRef='component2' />
    <CSSTransitionGroup>
      {isStep1 ? 
        <div ref='component1'></div>:
        <div ref='component2'></div>
      }
    </CSSTransitionGroup>
  </div>
)

The idea is that we can clone and cache component1 and then move it over component2 when the transition happens.

There is still alot of things to work out like how does the VisCont component know when to transition how to transition or if both refs are the same els.