Advanced Transition

In NarraLeaf-React, you can customize your own transition. Any class that implements the ITransition interface can be used as a transition.

How does it work?

We cannot transition two image directly because NarraLeaf-React does not have any rendering engine. Instead, we can use two or multiple images to simulate the transition.

For example, in the Dissolve transition, we will create two images. The first image will fade out, and the second image will fade in at the same time.

When the transition starts, your class will request a animation frame from the Framer Motion (opens in a new tab) library. The library will help you update your state. After that, you can output an array of element props. Each element represents the properties of the image element. The further forward the element is in the array, the lower the layer it will be rendered on.

Here is an example of Dissolve.ts (opens in a new tab)

For more information, see ITransition.

More deep

Transitions are controlled by the image components and scene background components. Every time the transition triggers, the component will call the toElementProps method of the transition effect. The method will return an array of element props, each element props will be used to render an image element.

Why we don't use CSS animation?

We could use CSS animation to animate the image directly, and the CSS animation may have a better performance. However, we can use element props to create more complex transitions, and we can control every frame of the transition, including the element properties. And it is easy to learn and use.

ITransition, ITextTransition, and IImageTransition

ITransition is the base interface of all transitions. Other interfaces are inherited from ITransition.

ITextTransition is used to transition text elements, and IImageTransition is used to transition image elements.

Custom Transition

You can create your own transition effect by implementing transition interfaces and extends a base class.

For example, if you want to create a new transition for image, you can implement the IImageTransition interface and extends the BaseImageTransition