customAnimations

Centralized custom animations for the SDK components.

Details

Attribute: custom-animations

Type: string | CustomAnimations

Default value: undefined

Morphology

provider.customAnimations = {
  sdkProvider: { loading: '/assets/anim/loading.json' },
};

Description

JSON or object with animation paths (Lottie, GIF, MP4) shared between facephi-sdk-provider, facephi-selphi-widget, facephi-selphid-widget and other children. The configuration can be partial: components without a defined value use their default animations.

Considerations

If you define the same animation here and in a direct prop (e.g. loadingAnimation), customAnimations takes precedence. Invalid values are reported in the console.

Additional information

Available structure:

• sdkProvider

  • loading (string): Provider loading animation.

• fileUploader

  • loadingFile (string): File loading animation.

• qr

  • selphi (string): Desktop preview during Selphi capture on mobile.

  • selphid (string): Desktop preview during SelphID capture on mobile.

  • fileUploader (string): Desktop preview during file upload on mobile.

• selphi

  • loading (string): Selphi loading animation.

  • tutorial (string[]): Tutorial animations.

  • initialTip (object): Selphi initial tip animation.

    • mobile (string): Initial tip in mobile view.

    • desktop (string): Initial tip in desktop view.

• selphid

  • loading (string): SelphID loading animation.

  • tutorial (string[]): Tutorial animations.

  • initialTip (object): SelphID initial tip animation.

    • mobile (string): Initial tip in mobile view.

    • desktop (string): Initial tip in desktop view.

---

Example

<facephi-sdk-provider
    apikey={process.env.FACEPHI_SDK_APIKEY}
    customAnimations={{
        sdkProvider: { loading: '/assets/anim/custom-loading.gif' },
        selphi: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        selphid: {
            loading: '/assets/anim/custom-loading.gif',
            initialTip: {
                mobile: '/assets/anim/custom-tip-mobile.gif',
                desktop: '/assets/anim/custom-tip-desktop.gif',
            },
        },
        qr: {
            selphi: '/assets/anim/desktop-selphi.gif',
            selphid: '/assets/anim/desktop-selphid.gif',
        },
    }}
>
    <facephi-selphi-widget />
</facephi-sdk-provider>