Use Framer X overrides to quickly prototype a dropdown menu animation.
animate
and variant
props to animate between different statesexport 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 },
},
}
}
Data
to communicate between overridesimport { Data } from "framer"
const appState = Data({
menuMode: "closed",
})
export function MenuBar(props): Override {
return {
onTap: () => {
appState.menuMode = appState.menuMode === "open" ? "closed" : "open"
},
}
}
useInvertedScale
to prevent distortionFor performance reasons, it’s recommended to animate scale
instead of width
or height
. However, the content inside might be distorted.
The solution is to use the useInvertedScale
hook.
useInvertedScale
hookimport { useInvertedScale } from "framer"
export function MenuContent(props): Override {
const { scaleY } = useInvertedScale()
return {
scaleY,
}
}
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.
Want the complete source file? Enter your email address below:
I'll also send you new tips when available. No spam, unsubscribe any time!
© 2019 jimu Labs, Inc.