lintonye

import * as React from "react"
import { Override, Data, transform } from "framer"

import {
    useScroll,
    useTrackScrollY,
    // @ts-ignore
} from "@framer/lintonye.parallax/code"

const appState = Data({

lintonye

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,

lintonye

export function ChatHead(props): Override {
    const anim = useAnimation()
    return {
        drag: true,
        animate: anim,
        onDragStart: () => {
            appState.bottomSheetY = 0
        },
        onDragEnd: (_, info) => {
            appState.bottomSheetY = bottomSheetHeight

lintonye

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,
})

lintonye

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 () => {

lintonye

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

const upTop = 40,
    downTop = 200

const data = Data({
    rotate: 0,
    rotateY: 0,
    toggle: true,
    opacity: 0.2,

lintonye

import { Override, AnimationControls } from "framer";

const anim1 = new AnimationControls();
const anim2 = new AnimationControls();

// Where to call unmount???
anim1.mount();
anim2.mount();

async function animate() {

lintonye

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";

lintonye

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

const data = Data({
  button1Bg: Animatable("red"),
  button2Bg: Animatable("white")
});

let activeButtonBg = data.button1Bg;
let inactiveButtonBg = data.button2Bg;

lintonye

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";
    }