ITransition

Transition effect is used to animate the Image or Scene when changing image or background of the scene.

You cannot use ITransition to animate image, you have to use IImageTransition instead.

import React from "react";
import type { AnimationPlaybackControls } from "framer-motion";
 
type ElementProp<T extends Element = Element, U extends React.HTMLAttributes<T> = 
    React.HTMLAttributes<T>> = React.JSX.IntrinsicAttributes & React.ClassAttributes<T> & React.HTMLAttributes<T> & U;
interface ITransition<T extends ElementProp = Record<string, any>> {
    start(onComplete?: () => void): void;
    toElementProps(): T[];
    copy(): ITransition<T>;
}

Public Method

start

Start the transition effect.

onComplete?: () => void - Callback function that will be called when the transition is completed.

You can request animation by calling Base.prototype.requestAnimation if you extend the Base class.

super.requestAnimation({
    start: 0,
    end: 1,
    duration: this.duration
}, {
    onComplete,
    onUpdate: (value) => {
        this.state.opacity = value;
    }
});

toElementProps

Returns an array of ElementProps, each element represents the properties of the image element.

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

public toElementProps(): (DissolveProps & ElementProp)[] {
    return [
        { // for the first image
            style: {opacity: this.state.opacity},
        },
        { // for the second image
            style: {opacity: 1 - this.state.opacity},
            src: this.src,
        }
    ];
}

When we dissolve the image, we actually render two images at the same time. The first image has an opacity of this.state.opacity, and the second image has an opacity of 1 - this.state.opacity.
So that the first image will gradually disappear, and the second image will gradually appear.

copy

Returns a new instance of the transition effect.

Public Property

Custom Transition

You can create your own transition effect by implementing the ITransition interface and extends the Base (opens in a new tab) class.

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

/**
 * @class Dissolve
 * @implements ITransition
 * @extends BaseTransition
 * @description Dissolve transition effect
 */
export class Dissolve extends BaseImageTransition<ImgElementProp> implements IImageTransition {
    static Frames: [number, number] = [1, 0];
    private readonly duration: number;
    private state = {
        opacity: 0,
    };
    private src?: ImageSrc | ImageColor;
    private readonly easing: TransformDefinitions.EasingDefinition | undefined;
 
    /**
     * Image will dissolve from one image to another
     */
    constructor(duration: number = 1000, easing?: TransformDefinitions.EasingDefinition) {
        super();
        this.duration = duration;
        this.easing = easing;
    }
 
    setSrc(src: ImageSrc | ImageColor | undefined): this {
        this.src = src;
        return this;
    }
 
    public start(onComplete?: () => void): void {
        this.state.opacity = Dissolve.Frames[0];
 
        this.requestAnimation({
            start: Dissolve.Frames[0],
            end: Dissolve.Frames[1],
            duration: this.duration
        }, {
            onComplete: () => {
                this.state.opacity = Dissolve.Frames[1];
                if (onComplete) {
                    onComplete();
                }
            },
            onUpdate: (value) => {
                this.state.opacity = value;
            },
        }, {
            ease: this.easing,
        });
    }
 
    public toElementProps(): ImgElementProp[] {
        return [
            {
                style: {opacity: this.state.opacity},
            },
            {
                style: {
                    opacity: 1 - this.state.opacity,
                    backgroundColor: Utils.isImageColor(this.src) ? toHex(this.src) : "",
                },
                src: Utils.isImageSrc(this.src) ? Utils.srcToString(this.src) : "",
            },
        ];
    }
 
    copy(): Dissolve {
        return new Dissolve(this.duration, this.easing).setSrc(this.src);
    }
}

Advanced Transition IImageTransition