Skip to content

Instantly share code, notes, and snippets.

View 1.1.0.3-workflow-demo override.tsx
import * as React from "react"
import { Override, Data, transform } from "framer"
import {
useScroll,
useTrackScrollY,
// @ts-ignore
} from "@framer/lintonye.parallax/code"
const appState = Data({
View drivers-override.ts
import * as React from "react"
import { Override, Data, useTransform, motionValue } from "framer"
const x = motionValue(0)
export function Card(props): Override {
const rotate = useTransform(x, [-100, 100], [-20, 20])
return {
rotate,
x,
View principle-chatHead-drag-restriction.tsx
export function ChatHead(props): Override {
const anim = useAnimation()
return {
drag: true,
animate: anim,
onDragStart: () => {
appState.bottomSheetY = 0
},
onDragEnd: (_, info) => {
appState.bottomSheetY = bottomSheetHeight
View principle-chatHead-drag.tsx
import * as React from "react"
import { Override, Data, useAnimation } from "framer"
// Learn more: https://framer.com/docs/overrides/
const bottomSheetHeight = 129
const appState = Data({
bottomSheetY: bottomSheetHeight,
})
View useTransform2.ts
function useTransform2(
mv1: MotionValue,
mv2: MotionValue,
transformer: (v1, v2) => any
) {
const mv = useMotionValue(0)
React.useEffect(() => {
const unsub1 = mv1.onChange(v1 => mv.set(transformer(v1, mv2.get())))
const unsub2 = mv2.onChange(v2 => mv.set(transformer(mv1.get(), v2)))
return () => {
View 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,
View animation-sequence.ts
import { Override, AnimationControls } from "framer";
const anim1 = new AnimationControls();
const anim2 = new AnimationControls();
// Where to call unmount???
anim1.mount();
anim2.mount();
async function animate() {
View react-recipes.md

Render svg on Sketch, Web and React Native

What?

Use a single codebase to render svg on Sketch, Web and React Native, but react-primitives doesn't support svg yet. One suggestion is to use react-primitives-svg, but there's an issue when trying to render it on the web, as described in airbnb/react-sketchapp#265.

Solution

We could directly use the core.web.js file as below. Also there might be a way to pick up the .web.js extension just as .android.js and .ios.js.

// Svg.js
import { Platform } from "react-primitives";
View fx-toggle-button.ts
import { Data, animate, Override, Animatable } from "framer";
const data = Data({
button1Bg: Animatable("red"),
button2Bg: Animatable("white")
});
let activeButtonBg = data.button1Bg;
let inactiveButtonBg = data.button2Bg;
View CardFlip.ts
import { Data, Override } from "framer";
const data = Data({ cardFocus: "number" }); // => App state
export const Flip: Override = () => {
return {
onTap() {
// toggle card focus which determines the visible side of the card
data.cardFocus = data.cardFocus === "number" ? "cvc" : "number";
}