tisho / Switch.framerfx

Utility component for Framer X that lets you switch between different states of an element
31 stars 4 forks source link

Override Switch and useSwitch #22

Open christophevouillamoz opened 2 years ago

christophevouillamoz commented 2 years ago

In Framer it is not possible to add an override as soon useSwitch is used. In the override panel the file is not selected anymore and it is not in the dropdown.

Bildschirmfoto 2021-10-11 um 11 29 05

Without the const controls = useSwitch() line of code, it works and you can choose the override as expected in the panel.

Bildschirmfoto 2021-10-11 um 11 31 26

I also tried to import the switch package from the import wizard but this will not work, no import button available.

Bildschirmfoto 2021-10-11 um 11 32 13

The Code

import { Override } from "framer" import { useSwitch } from "@framer/tishogeorgiev.switch/code"

export function SwitchSwiper(): Override { const controls = useSwitch() var startPointX = 0

function onPanStart(event, info) {
    console.log("PanStart", info.point.x, info.point.y)
    startPointX = info.point.x
}

function onPanEnd(event, info) {
    console.log("PanEnd", info.point.x, info.point.y)

    var startPointDelta = info.point.x - startPointX

    console.log("Pan Result", startPointDelta, info.point.x, startPointX)

    if (startPointDelta < 0) {
        console.log("swipe left")
    } else {
        console.log("swipe right")
    }
}

function onPan(event, info) {
    console.log("Pan", info.point.x, info.point.y)
}

return {
    onPanStart: onPanStart,
    onPanEnd: onPanEnd,
    onPan: onPan,
}

}