Animation in Perspective


I am trying to animate an embedded view so that it will move both vertically and horizontally across and ‘overview’ page. Does anyone have any recommendations for the simplest way to achieve this?

You shouldn’t try this with an Embedded View. The View Canvas component was designed for exactly this type of use-case.

You should set ViewCanvas.props.instances[0].viewPath to the path to the View you want to use, and then you adjust the location properties of the instance. By default without any changes form you the View will render in the upper left of the View Canvas, and if you were to change ViewCanvas.props.instances[0].top to something like “200px”, then it would move the instanced View down 200px over the amount of time specified in ViewCanvas.props.transitionSettings.duration. You can adjust this time to make your animation take longer, or by setting it to have a value of 0 the re-positioning would be instantaneous.