motion-value-and-transform.js

import * as React from "react"
import { Frame, useCycle, useMotionValue, useTransform } from "framer"

// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api

export function MotionAndTransform() {
    const yPosition = useMotionValue(200)
    const xPosition = useMotionValue(0)
    const doubleXPosition = useTransform(xPosition, v => v * 2)
    const zoomScale = useTransform(yPosition, [100, 400], [0.5, 4])

    return (
        <Frame backgroundColor="#555" width="100%" height="100%">
            <Frame
                width={50}
                height={50}
                x={doubleXPosition}
                y={100}
                scale={zoomScale}
                backgroundColor="blue"
            />
            <Frame
                width={50}
                height={50}
                x={xPosition}
                y={yPosition}
                backgroundColor="yellow"
                dragConstraints={{ left: 0, right: 200, top: 200, bottom: 400 }}
                drag={true}
            />
        </Frame>
    )
}