Skip to content

Instantly share code, notes, and snippets.

@ibare
Created July 24, 2019 00:31
Show Gist options
  • Save ibare/93bf41c63c94852fd17fdd727c6c1810 to your computer and use it in GitHub Desktop.
Save ibare/93bf41c63c94852fd17fdd727c6c1810 to your computer and use it in GitHub Desktop.
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>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment