Component
Unusual Dropdown Component
This is a cool dropdown concept by Oleg Frolov, implemented in Framer, with no code needed. Feel free to use this on your website if you'd like to add a unique touch to your dropdowns.
About the resource
This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.
A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.
Scale down on click code override
Feel free to copy the code and create the code override from scratch in any of your projects.
About the resource
This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.
A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.
Scale down on click code override
Feel free to copy the code and create the code override from scratch in any of your projects.
About the resource
This component isn't too complex. It's made from a single component and uses multiple variants. These variants are linked with interactions.
A nice addition is that I applied a code override to the component so it scales down when clicked. You can find the code for that below, but it's also included in the remix.
Scale down on click code override
Feel free to copy the code and create the code override from scratch in any of your projects.
import type { ComponentType } from "react"
import { useState } from "react"
export function onClick(Component): ComponentType {
return (props) => {
const [isClicked, setIsClicked] = useState(false)
return (
<Component
{...props}
onMouseDown={() => setIsClicked(true)}
onMouseUp={() => setIsClicked(false)}
animate={
isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
}
transition={{ duration: 0.1 }}
/>
)
}
}import type { ComponentType } from "react"
import { useState } from "react"
export function onClick(Component): ComponentType {
return (props) => {
const [isClicked, setIsClicked] = useState(false)
return (
<Component
{...props}
onMouseDown={() => setIsClicked(true)}
onMouseUp={() => setIsClicked(false)}
animate={
isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
}
transition={{ duration: 0.1 }}
/>
)
}
}import type { ComponentType } from "react"
import { useState } from "react"
export function onClick(Component): ComponentType {
return (props) => {
const [isClicked, setIsClicked] = useState(false)
return (
<Component
{...props}
onMouseDown={() => setIsClicked(true)}
onMouseUp={() => setIsClicked(false)}
animate={
isClicked ? { scale: 0.95, y: 2.5 } : { scale: 1, y: 0 }
}
transition={{ duration: 0.1 }}
/>
)
}
}
