Component
Swipe Button Interaction
Created by
About the resource
This component has a frame positioned absolutely within it, and that frame slides over the white part of the component when you click the button.
We've also implemented an easy code override to achieve a scale-down effect as you press the button.
The code is included in the remix, but you can also copy it from below and create the override in your project from scratch if you prefer.
Scale down on click code override for Framer
Feel free to copy the code and create the code override from scratch in any of your projects.
About the resource
This component has a frame positioned absolutely within it, and that frame slides over the white part of the component when you click the button.
We've also implemented an easy code override to achieve a scale-down effect as you press the button.
The code is included in the remix, but you can also copy it from below and create the override in your project from scratch if you prefer.
Scale down on click code override for Framer
Feel free to copy the code and create the code override from scratch in any of your projects.
About the resource
This component has a frame positioned absolutely within it, and that frame slides over the white part of the component when you click the button.
We've also implemented an easy code override to achieve a scale-down effect as you press the button.
The code is included in the remix, but you can also copy it from below and create the override in your project from scratch if you prefer.
Scale down on click code override for Framer
Feel free to copy the code and create the code override from scratch in any of your projects.
import type { ComponentType } from "react"
import { motion } from "framer-motion"
export const withTap = (Component: ComponentType): ComponentType => {
return (props) => (
<Component
{...props}
as={motion.div}
style={{}}
whileTap={{
scale: 0.9,
transition: {
duration: 0.3,
ease: "easeInOut",
repeat: 0,
repeatDelay: 0,
delay: 0,
},
}}
/>
)
}import type { ComponentType } from "react"
import { motion } from "framer-motion"
export const withTap = (Component: ComponentType): ComponentType => {
return (props) => (
<Component
{...props}
as={motion.div}
style={{}}
whileTap={{
scale: 0.9,
transition: {
duration: 0.3,
ease: "easeInOut",
repeat: 0,
repeatDelay: 0,
delay: 0,
},
}}
/>
)
}import type { ComponentType } from "react"
import { motion } from "framer-motion"
export const withTap = (Component: ComponentType): ComponentType => {
return (props) => (
<Component
{...props}
as={motion.div}
style={{}}
whileTap={{
scale: 0.9,
transition: {
duration: 0.3,
ease: "easeInOut",
repeat: 0,
repeatDelay: 0,
delay: 0,
},
}}
/>
)
}
