Advanced Transform

We are going to explain the advanced usage of the Transform class.

Transform takes a series of sequences to create a complex transformation. Each sequence will be executed one by one.

Sequence

A single sequence is made of props and options.

See TransformDefinitions.Sequence

Here is an example of a sequence:

{
    props: {
        // The character will move to the left and scale down at the same time
        position: CommonPosition.Positions.Left,
        scale: 0.3
    },
    options: {
        // The transformation will take 1000ms
        duration: 1000,
 
        // The easing function is easeOut
        ease: "easeOut"
    }
}

Props

Props is an object that contains the properties of the transformation.

For image transformation, see TransformDefinitions.ImageTransformProps.

Options

Options is an object that contains the options of the transformation.

For more information, see TransformDefinitions.CommonTransformProps.

sync

If sync for the single sequence is set to false, the next sequence will not wait for the current sequence to finish.

duration

The duration of the transformation in milliseconds.

delay

ease

Definition for easing function, or a built-in easing function name.

See TransformDefinitions.EasingDefinition

Transform Config

See TransformDefinitions.TransformConfig

sync

If sync for the whole transform is set to false, the sequences will be executed one by one, but the process will not wait for these sequences to finish.

It is as same as the Control.doAsync

How does it work?

NarraLeaf-React use Framer Motion (opens in a new tab) to animate the elements. It follows the steps below:

1. for each sequence
   1. merge the previous props with the current props
   2. convert the props to the style object
   3. use useAnimate to animate the container of the element
   4. if the sequence is not sync, go to the next sequence, otherwise wait for the current sequence to finish
2. if the whole transform is not sync, the process will not wait for the sequences to finish

Custom Easing

Read more about Transition Ease (opens in a new tab)

Custom Properties