implement selection flow according to design

[mushon]

All screens appear in filename order here: https://www.dropbox.com/sh/fm34x8lujqkzy9j/AAAhwwD-00jJqfCITqZlv43ba?dl=0

Make sure to include:

• [x] Fix layout positioning and border widths
• [x] "More Normal" progress bar
• [x] scaling on a firm baseline
• [x] < | > sign animation
• [ ] the circled round count number should only appear as full when the selection was made

[eranws]

@mushon I am missing the overlay-text in the intro. Can you add or override bin/Data/assets/prompt_0.3_intro.png with the correct file?

[eranws]

also, need to define how to mix the intro with the placemark animation flying out:

[mushon]

@eranws https://www.dropbox.com/s/uj8m42t4ery05r7/intro_text.png?dl=0

[mushon]

Concerning the second point, let’s wait with it. It’s a lower priority. Thanks!

[mushon]

@eranws at this point do you need something more specific for the animation transitions than the frames I exported to the Dropbox folder? You can also use image references from this folder: Turing > tnm2 > Berlin > favorite portraits

[mushon]

Video reference for 1280x800px resolution: https://www.dropbox.com/s/0qgzsr57jzw09kc/tnm_animation_1280x800.mov?dl=0

Code reference from Framer prototype:

// App.tsx

import { Override, Data } from "framer"

// [1]
const appState = Data({
    selectedFrame: "-",
    round: 0,
    selectedA: false,
    selectedB: false,
    fold: false,
    winA: false,
    winB: false,
})

const variants = {
    initial: {
        height: 670,
        width: 506,
        transition: { duration: 0.25 },
    },
    selected: {
        height: 740,
        width: 560,
        transition: { duration: 0.5 },
    },
    deselected: {
        height: 600,
        width: 453,
        transition: { duration: 1 },
    },
    win: {
        width: 0,
        transition: {
            delay: 1,
            duration: 1,
        },
    },
    lose: {
        width: 0,
        transition: { duration: 1 },
    },
}

export function frameA(): Override {
    return {
        // animate: appState.selectedFrame == "A" ? "selected" : "deselected",
        onMouseOver: () => (
            (appState.selectedA = true), (appState.selectedB = false)
        ),
        onMouseOut: () => (appState.selectedA = false),
        initial: "initial",
        whileHover: "selected",
        variants: variants,
        // case (appState.fold) { animate: appState.winA ? "win" : "lose" }
        animate: appState.fold
            ? appState.winA
                ? "win"
                : "lose"
            : appState.selectedFrame == "A"
            ? "selected"
            : appState.selectedB
            ? "deselected"
            : "initial",
    }
}

export function frameB(): Override {
    return {
        // [3]
        // animate: appState.selectedFrame == "B" ? "selected" : "deselected",
        onMouseOver: () => (
            (appState.selectedB = true), (appState.selectedA = false)
        ),
        onMouseOut: () => (appState.selectedB = false),
        initial: "initial",
        whileHover: "selected",
        variants: variants,
        animate: appState.fold
            ? appState.winB
                ? "win"
                : "lose"
            : appState.selectedFrame == "B"
            ? "selected"
            : appState.selectedA
            ? "deselected"
            : "initial",
    }
}

const barVariants = {
    opened: {
        width: 560,
        opacity: 100,
        transition: { duration: 3 },
    },
    initial: {
        width: 0,
        opacity: 0,
        transition: { duration: 0.25 },
    },
}

export function barA(): Override {
    return {
        variants: barVariants,
        transition: { duration: 3 },
        animate: appState.selectedA ? "opened" : "initial",
        onAnimationComplete: () => {
            if (appState.selectedA) {
                appState.fold = true
                appState.winA = true
            }
        },
    }
}

export function barB(): Override {
    return {
        variants: barVariants,
        transition: { duration: 3 },
        animate: appState.selectedB ? "opened" : "initial",
        onAnimationComplete: () => {
            if (appState.selectedB) {
                appState.fold = true
                appState.winB = true
            }
        },
    }
}

const gttVariants = {
    gt: {
        rotate: 60,
        bottom: 36,
        transition: { duration: 1.5 },
    },
    st: {
        rotate: -60,
        bottom: 36,
        transition: { duration: 1.5 },
    },
    initial: {
        rotate: 0,
        bottom: 45,
        transition: { duration: 0.25 },
    },
}

const gtbVariants = {
    gt: {
        rotate: -60,
        top: 36,
        transition: { duration: 1.5 },
    },
    st: {
        rotate: 60,
        top: 36,
        transition: { duration: 1.5 },
    },
    initial: {
        rotate: 0,
        top: 45,
        transition: { duration: 0.25 },
    },
}

export function gtt(): Override {
    return {
        variants: gttVariants,
        animate: appState.selectedA
            ? "gt"
            : appState.selectedB
            ? "st"
            : "initial",
    }
}

export function gtb(): Override {
    return {
        variants: gtbVariants,
        animate: appState.selectedA
            ? "gt"
            : appState.selectedB
            ? "st"
            : "initial",
    }
}

[mushon]

For additional sizes and references please refer to these two Zeplin pages: https://zpl.io/agWGvjD https://zpl.io/ad1A7Z1