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 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 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 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 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";
}
View 3.8-flex-under-the-hood-solution.md

Solutions:

  1. Because the “name” style contains “flex: 1”, the name text is flexible. This means it may grow or shrink depending on how much space is available in its container. Now this is important: the description text is really tall -- so tall that it uses up all the space in the container and it still sticks out. Therefore, the flexible items in the same container are shrunk to make room for the description text. Because the description is too tall, the name text is compressed to 0 height. That’s why it’s invisible. Phew…

  2. Now when the hat image is made flexible, it gets shrunk too. This time, because the image can be shrunk down quite a bit -- to the point that the container has enough room for all its children, including the tall description text that used to stick out. Now, everybody is happy. The name, hat image, description text are all displayed correctly. Notice the last line of the description “<= The end”. It was not visible before since the description stuck outside of its container.

3