How to use framesync - 10 common examples

({ complete, update }): PhysicsInterface => {
      let {
        acceleration = 0,
        friction = 0,
        velocity = 0,
        springStrength,
        to
      } = props;
      const { restSpeed = 0.001, from = 0 } = props;
      let current = from;

      const process = sync.update(({ delta }) => {
        // Integration doesn't work well with very low numbers
        const elapsed = Math.max(delta, 16);

        if (acceleration) velocity += speedPerFrame(acceleration, elapsed);
        if (friction) velocity *= (1 - friction) ** (elapsed / 100);

        if (springStrength !== undefined && to !== undefined) {
          const distanceToTarget = to - current;
          velocity += distanceToTarget * speedPerFrame(springStrength, elapsed);
        }

        current += speedPerFrame(velocity, elapsed);

        update(current);

        const isComplete =

const {
        from = 0.0,
        to = 0.0,
        stiffness = 100,
        damping = 10,
        mass = 1.0,
        restSpeed = 0.01,
        restDelta = 0.01
      } = props;
      const initialVelocity = velocity ? -(velocity / 1000) : 0.0;
      let t = 0;
      const delta = to - from;
      let position = from;
      let prevPosition = position;

      const process = sync.update(({ delta: timeDelta }) => {
        t += timeDelta;

        const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
        const angularFreq = Math.sqrt(stiffness / mass) / 1000;

        prevPosition = position;

        // Underdamped
        if (dampingRatio < 1) {
          const envelope = Math.exp(-dampingRatio * angularFreq * t);
          const expoDecay =
            angularFreq * Math.sqrt(1.0 - dampingRatio * dampingRatio);

          position =
            to -
            envelope *

}

      update(output);
    };

    const onMove = (e: TouchEvent) => {
      if (preventDefault || e.touches.length > 1) e.preventDefault();
      sync.update(updatePoint);
    };

    const updateOnMove = listen(document, 'touchmove', {
      passive: !preventDefault
    }).start(onMove);

    // TODO: Look into running this as a process
    if (isTouchDevice) sync.update(updatePoint);

    return {
      stop: () => {
        cancelSync.update(updatePoint);
        updateOnMove.stop();
      }
    };
  });

update() {
    const { stiffness, damping, mass, from, to, restSpeed, restDisplacement } = this.props;
    const { delta, initialVelocity } = this;

    const timeDelta = timeSinceLastFrame() / 1000;
    const t = this.t = this.t + timeDelta;

    const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
    const angularFreq = Math.sqrt(stiffness / mass);
    const expoDecay = angularFreq * Math.sqrt(1.0 - (dampingRatio * dampingRatio));

    const x0 = 1;
    let oscillation = 0.0;

    // Underdamped
    if (dampingRatio < 1) {
      const envelope = Math.exp(-dampingRatio * angularFreq * t);
      oscillation = envelope * (((initialVelocity + dampingRatio * angularFreq * x0) / expoDecay) * Math.sin(expoDecay * t) + (x0 * Math.cos(expoDecay * t)));
      this.velocity = (envelope * ((Math.cos(expoDecay * t) * (initialVelocity + dampingRatio * angularFreq * x0)) - (expoDecay * x0 * Math.sin(expoDecay * t))) -
        ((dampingRatio * angularFreq * envelope) * ((((Math.sin(expoDecay * t) * (initialVelocity + dampingRatio * angularFreq * x0)) ) / expoDecay) + (x0 * Math.cos(expoDecay * t)))));

update() {
    const { autoStopSpeed, acceleration, friction, velocity, spring, to } = this.props;
    let newVelocity = velocity;
    const elapsed = timeSinceLastFrame();

    // Apply acceleration to velocity
    if (acceleration) {
      newVelocity += speedPerFrame(acceleration, elapsed);
    }

    // Apply friction to velocity
    if (friction) {
      newVelocity *= (1 - friction) ** (elapsed / 100);
    }

    if (spring && to !== undefined) {
      const distanceToTarget = to - this.current;
      newVelocity += distanceToTarget * speedPerFrame(spring, elapsed);
    }

const updateTween = () => {
    elapsed += timeSinceLastFrame();
    // const progress = clampProgress(getProgressFromValue(0, duration, elapsed));
    // const current = getValueFromProgress(from, to, ease(progress));
    update(elapsed);
  };

function onPointerDown(
        event: MouseEvent | TouchEvent | PointerEvent,
        info: EventInfo
    ) {
        // If we have more than one touch, don't start detecting this gesture
        if (isTouchEvent(event) && event.touches.length > 1) return

        const initialInfo = transformPoint(info)
        const { point } = initialInfo

        const { timestamp } = getFrameData()
        session.current = {
            target: event.target,
            pointHistory: [{ ...point, timestamp }],
        }

        const { onPanSessionStart } = handlersRef.current

        onPanSessionStart && onPanSessionStart(event, getPanInfo(initialInfo))

        removePointerEvents()

        const removeOnPointerMove = addPointerEvent(
            window,
            "pointermove",
            onPointerMove
        )

cancelPan()
            return
        }

        const info = getPanInfo(lastMoveEventInfo.current)
        const panStarted = session.current.startEvent !== undefined

        // Only start panning if the offset is larger than 3 pixels. If we make it
        // any larger than this we'll want to reset the pointer history
        // on the first update to avoid visual snapping to the cursoe.
        const distancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3

        if (!panStarted && !distancePastThreshold) return

        const { point } = info
        const { timestamp } = getFrameData()
        session.current.pointHistory.push({ ...point, timestamp })

        const { onPanStart, onPan } = handlersRef.current

        if (!panStarted) {
            onPanStart && onPanStart(lastMoveEvent.current, info)
            session.current.startEvent = lastMoveEvent.current
        }

        onPan && onPan(lastMoveEvent.current, info)
    }

if (this.children) {
            this.children.forEach(this.setChild)
        }

        if (render && this.renderSubscribers) {
            this.renderSubscribers.forEach(this.notifySubscriber)
        }

        // Update timestamp
        const { delta, timestamp } = getFrameData()

        if (this.lastUpdated !== timestamp) {
            this.timeDelta = delta
            this.lastUpdated = timestamp
            sync.postRender(this.scheduleVelocityCheck)
        }
    }

update: (transforms: Coords) => {
                applyCoordTransform(el, transforms);
                // this helps prevent layout thrashing
                sync.postRender(() => recordPositions([el]));
              },
              complete: cachedResolve,