Skip to content

Instantly share code, notes, and snippets.

@pburtchaell
Last active June 29, 2024 17:22
Show Gist options
  • Save pburtchaell/f1a1b625c799b84905b3845140225544 to your computer and use it in GitHub Desktop.
Save pburtchaell/f1a1b625c799b84905b3845140225544 to your computer and use it in GitHub Desktop.
Double tap & long press event overrides for Framer X
import { Data, Override } from "framer"
const state = Data({
doubleTapIndex: 0,
doubleTapTimer: setTimeout(null, null),
longPress: false,
longPressTimer: setTimeout(null, null),
})
export function doubleTap(): Override {
return {
whileTap: {
scale: 0.95,
},
onTap() {
if (state.doubleTapIndex === 1) {
clearTimeout(state.doubleTapIndex)
console.log("Double Tap")
} else if (state.doubleTapIndex <= 1) {
state.doubleTapIndex = state.doubleTapIndex + 1
// Start a timer to cancel the double tap after 1s
state.doubleTapTimer = setTimeout(() => {
state.doubleTapIndex = 0
state.doubleTapTimer = null
}, 1000)
}
},
}
}
export function longPress(): Override {
return {
whileTap: {
scale: 0.95,
},
onTapStart() {
// Start a timer to trigger the long press after 1s
state.longPressTimer = setTimeout(() => {
state.longPress = true
console.log("Long Press")
}, 1000)
},
onTap() {
if (state.longPress === true) {
console.log("Long Press End")
} else {
clearTimeout(state.longPressTimer)
}
// Reset the long press state
state.longPress = false
},
}
}
@pburtchaell
Copy link
Author

You could also do this in a code component using React.useState hook, but here's an example for design components + overrides.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment