Interactive Animation

The interactiveAnimation step presents users with an engaging, interactive animation powered by Rive. This step allows users to interact with the animation in real-time, offering dynamic feedback based on user inputs or actions, enhancing the overall user experience.

Step Config

Key	Description	Is Optional?
type	Should be interactiveAnimation to differs from other steps	Required
stepId	Unique step identifier.	Required
backgroundColor	The background color of the page.	Required
shouldFadeIn	The background color of the page.	Optional
shouldFadeOut	Whether the step should fadeIn animation on enter.	Optional
title	Text to show on top of the animation.	Optional
subtitle	Text to show below the animation.	Optional
textColor	title and subtitle color.	Optional
backgroundImage	Background image of the screen for mobile.	Optional
desktopBackground	Background image of the screen for desktop.	Optional
animation	Config describing animation and how to use it check type	Required
hideProgressBar		Can be set to true to hide the progress bar.

Animation Config

Name	Description	Is Optional?
url	The URL of the Rive animation asset.	Required
stateMachine	State machine name for controlling the animation logic. ex. state_machine_1.	Optional
autoplay	Determine if the animation starts automatically.	Optional (Default false)
texts	A map where the keys represent the names of run text elements within the Rive animation that can be replaced, and the values correspond to the text value. Supports all our default placeholders, e.g., {{NAME}}}, {{TODAY	year}}}, {{TODAY
images	A map where the keys represent the names of images within the Rive animation that can be replaced, and the values correspond to the URLs of the replacement images.	Optional

Example

Interactive Animation (Last step before redirecting to payment)

{
    "id": "mind_app_id",
    "journeyId": "SaDJUYAjRv",
    "language": "en",
    "appId": "co.thefab.mind",
    "seo":
    {
        "title": "Lumiere",
        "favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
        "description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
    },
    "steps":
    [
        {
            "type": "questions",
            "stepId": "questions_name_email",
            "backgroundColor": "#052E6C",
            "questions":
            [
                {
                    "type": "name",
                    "title": "My first name is...",
                    "bottomBarColor": "#0B4EB5",
                    "ctaColor": "#FFFFFF",
                    "backgroundColor": "#052E6C",
                    "ctaTextColor": "#052E6C",
                    "textColor": "#FFF",
                    "ctaText": "Continue",
                    "placeholder": " Enter your name"
                },
                {
                    "type": "age",
                    "title": "What is your age?",
                    "backgroundColor": "#052E6C",
                    "ctaColor": "#FFFFFF",
                    "ctaTextColor": "#0B3887",
                    "bottomBarColor": "#0B4EB5",
                    "termsLinkColor": "#5ECCE0",
                    "isSkippable": false,
                    "textColor": "#FFF",
                    "ctaText": "Continue",
                    "placeholder": "Your age",
                    "trackAsNewUserProperty": true,
                    "userPropertyKey": "age_range"
                },
                {
                    "type": "email",
                    "title": "Enter your Email to save your progress",
                    "showEmailCheckmark": true,
                    "emailRequired": true,
                    "showImprovedEmailSuggestion": true,
                    "bottomBarColor": "#0B4EB5",
                    "ctaColor": "#FFFFFF",
                    "backgroundColor": "#052E6C",
                    "ctaTextColor": "#0B3887",
                    "tickColor": "#FFFFFF",
                    "selectedTickBackgroundColor": "#5ECCE0",
                    "ctaText": "Continue",
                    "textColor": "#FFF",
                    "placeholder": " example@email.com",
                    "invalidEmailMessage": "* Please enter a valid email address"
                }
            ]
        },
        {
            "type": "video",
            "stepId": "chapter_4_video",
            "url": "https://c.thefab.co/mind/onboarding/video/vid_moon_clouds_optimized.mp4",
            "tallScreenUrl": "https://c.thefab.co/mind/onboarding/video/vid_moon_clouds_optimized.mp4",
            "showCloseButtonOnTap": false,
            "loopVideo": false,
            "backgroundColor": "#001042",
            "showPulseAnimation": true,
            "aspect": "FIT_SINGLE_SIDE",
            "shouldCloseAnimated": true,
            "color_ctaOpacity": 0.75,
            "title": "",
            "subtitle": "",
            "textColor": "#FFFFFF",
            "transitionCircleColor": "#052E6C"
        },
        {
            "type": "interstitial",
            "stepId": "future_you_calling",
            "config":
            {
                "id": "interstitial1",
                "title": "Hey! This is future {{NAME}}, calling from {{TODAY|year|+1}}. You need to resign today from your position as an anxiety manager",
                "aspect": "FIT_SINGLE_SIDE",
                "color_cta": "#FFFFFF",
                "showTextDelay": 4000,
                "showButtonsDelay": 8000,
                "should_animate_text": true,
                "lottieUrl": "https://c.thefab.co/web-onboarding/mind/lottie/future-you-no-clouds.json",
                "color_cta_button": "#5ECCE0",
                "subtitle": "",
                "showCtaRightCaret": false,
                "cta": "Say more, future {{NAME}}",
                "mode": "BOLD",
                "hide_close_icon": true,
                "color_background": "#052E6C",
                "textColor": "#FFFFFF"
            }
        },
        {
            "type": "interactiveAnimation",
            "stepId": "contract",
            "animation": {
                "url": "https://storage.googleapis.com/c.thefab.co/web-riv/rev_user_resignation_letter_3.riv",
                "stateMachine": "state_machine_1",
                "autoplay": true,
                "texts": {
                    "userName1": "{{NAME}}",
                    "userName2": "{{NAME}}",
                    "userName3": "{{NAME}}",
                    "userName4": "{{NAME}}"
                }
            },
            "backgroundColor": "#061843"
        },
        {
            "type": "webview",
            "stepId": "pwyw_page",
            "redirectTo": "https://mind.thefabulous.co/payment/pwyw/generic-pwyw?appId=co.thefab.mind&upsellPath=/journey/time/clarify-upsell-var1",
            "engine": "premium",
            "hideCloseButton": true,
            "subprintText": "",
            "subprintColor": "",
            "buttonColor": "#0B3887",
            "isOffer": false,
            "topSubprintText": "",
            "deepLink": "{{APPLICATION_ID}}://skip",
            "showWebfloatingButtonDelay": 10000,
            "backgroundColor": "#241D82"
        }
    ],
    "logic":
    []
}