rollover.tsx

import { Data, animate, Override, Animatable } from "framer"

const upTop = 40,
    downTop = 200

const data = Data({
    rotate: 0,
    rotateY: 0,
    toggle: true,
    opacity: 0.2,
    top1: downTop, // no longer need to use Animatable, just a number will work
})

export function Hover(): Override {
    return {
        // opacity: data.opacity,  // this is no longer needed
        whileHover: {
            opacity: 0.7, // this opacity only applies to the object which is assigned the Hover override
            //animate.ease(data.top1, upTop) // animate is no longer needed
        },
        // Use onMouseOver and onMouseOut to change *other* object's properties
        onMouseOver: () => {
            data.top1 = upTop
        },
        onMouseOut: () => {
            data.top1 = downTop
        },
    }
}

export const GetTop1: Override = () => {
    return {
        /* use the "animate" prop to animate a property */
        // top: data.top1,
        animate: { top: data.top1 },
    }
}