steveruizok

/**
 * Find the point(s) where a line segment intersects an ellipse.
 * @param x0 The x-axis coordinate of the line's start point.
 * @param y0 The y-axis coordinate of the line's start point.
 * @param x1 The x-axis coordinate of the line's end point.
 * @param y1 The y-axis coordinate of the line's end point.
 * @param cx The x-axis (horizontal) coordinate of the ellipse's center.
 * @param cy The y-axis (vertical) coordinate of the ellipse's center.
 * @param rx The ellipse's major-axis radius. Must be non-negative.

steveruizok

Mobile Gallery
  Gallery Closed*
    clicked image -> Gallery Open
  Gallery Open
    clicked-close -> Gallery Closed
    Image View*
      clicked prev -> Image View
      clicked next -> Image View
      clicked grid button -> Grid View
      Zoomed-Out*

steveruizok

My Awesome Sketch
  First State
    some event -> Second State
  Second State

steveruizok

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

const appState = Data({
    state: "pause",
})

export function PlayButton(props): Override {
    return {
        onTap: () => {

steveruizok

import * as React from "react"
import { Override, Data, AnimationControls, useAnimation } from "framer"
import { useAnimationSequence } from "./useAnimationSequence"
import { animationSequence } from "./animationSequence"

// Learn more: https://framer.com/docs/overrides/

let heart1: AnimationControls
let heart2: AnimationControls
let heart3: AnimationControls

steveruizok

const isNotMax = context => context.count < 10;
const isNotMin = context => context.count > 0;

const increment = context => context.count + 1;
const decrement = context => context.count - 1;

const counterMachine = Machine({
  initial: 'active',
  context: {
    count: 0

steveruizok

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

steveruizok

// Hit testing algorithm

const ccw = (A: [number, number], B: [number, number], C: [number, number]) =>
	(C[1] - A[1]) * (B[0] - A[0]) > (B[1] - A[1]) * (C[0] - A[0])

export const intersect = (
	A: [number, number],
	B: [number, number],
	C: [number, number],
	D: [number, number]

steveruizok

import * as React from "react"
import { useLayoutEffect } from "react"
import { MotionValue } from "framer"
import { throttle } from "./throttle"

export function useMotionCallback<K>(
    parents: (MotionValue | number | boolean)[],
    callback: (...parents) => K,
    throttleStep = 16
) {

steveruizok

import { useEffect } from "react"
import { MotionValue, useMotionValue } from "framer"

/**
 * UseRelative
 * @description Declare a motion value with a value dependent on multiple other values.
 * @param parents An array of motion values or values.
 * @param transform A function that receives the current values and returns a computed value.
 * @example
 * ```jsx