Framer X Pro Tips

Code
Code Overrides
Framer X

Make a dropdown menu

2018-09-29

Overview

Use Framer X overrides to quickly prototype a dropdown menu animation.

Solution

Use animate and variant props to animate between different states

export function Icon(props): Override {
    return {
        animate: appState.menuMode,
        variants: {
            open: { rotate: 180 },
            closed: { rotate: 0 },
        },
    }
}

export function MenuContentFrame(props): Override {
    const { scaleY } = useInvertedScale()
    return {
        animate: appState.menuMode,
        originY: 0,
        variants: {
            open: { scaleY: 1 },
            closed: { scaleY: 0 },
        },
    }
}

Use Data to communicate between overrides

import { Data } from "framer"

const appState = Data({
    menuMode: "closed",
})

export function MenuBar(props): Override {
    return {
        onTap: () => {
            appState.menuMode = appState.menuMode === "open" ? "closed" : "open"
        },
    }
}

Use useInvertedScale to prevent distortion

For performance reasons, it’s recommended to animate scale instead of width or height. However, the content inside might be distorted.

distorted

The solution is to use the useInvertedScale hook.

1. Separate the content and the “frame” of the menu

layer screenshot

2. useInvertedScale hook

import { useInvertedScale } from "framer"
export function MenuContent(props): Override {
    const { scaleY } = useInvertedScale()
    return {
        scaleY,
    }
}

3. Set the overflow of the contentFrame to hidden

Don’t forget this step, or else the menu will look strange.

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!

© 2020 jimu Labs, Inc.