How to use the framesync.update function in framesync

To help you get started, we’ve selected a few framesync examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Popmotion / popmotion / packages / popmotion / src / animations / physics / index.ts View on Github external
({ 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 =
github Popmotion / popmotion / packages / popmotion / src / animations / spring / index.ts View on Github external
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 *
github Popmotion / popmotion / packages / popmotion / src / input / multitouch / index.ts View on Github external
}

      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();
      }
    };
  });
github Popmotion / popmotion / packages / popmotion / src / compositors / multi.ts View on Github external
complete: () => {
          if (!hasCompleted) {
            hasCompleted = true;
            numCompletedActions++;
            if (numCompletedActions === numActions) sync.update(complete);
          }
        },
        error,
github Popmotion / popmotion / packages / popmotion / src / animations / every-frame / index.ts View on Github external
action(({ update }) => {
    let initialTime = 0;

    const process = sync.update(
      ({ timestamp }) => {
        if (!initialTime) initialTime = timestamp;
        update(timestamp - initialTime);
      },
      true,
      true
    );

    return {
      stop: () => cancelSync.update(process)
    };
  });
github Popmotion / popmotion / packages / popmotion / src / animations / tween / index.ts View on Github external
process = sync.update(({ delta }) => {
          elapsed += delta;
          updateTween();

          if (isTweenComplete()) {
            cancelSync.update(process);
            complete && sync.update(complete, false, true);
          }
        }, true);
      };
github Popmotion / popmotion / packages / popmotion / src / animations / decay / index.ts View on Github external
velocity = 0,
      from = 0,
      power = 0.8,
      timeConstant = 350,
      restDelta = 0.5,
      modifyTarget
    } = props;
    let elapsed = 0;
    const amplitude = power * velocity;
    const idealTarget = Math.round(from + amplitude);
    const target =
      typeof modifyTarget === 'undefined'
        ? idealTarget
        : modifyTarget(idealTarget);

    const process = sync.update(({ delta: frameDelta }) => {
      elapsed += frameDelta;
      const delta = -amplitude * Math.exp(-elapsed / timeConstant);
      const isMoving = delta > restDelta || delta < -restDelta;
      const current = isMoving ? target + delta : target;

      update(current);

      if (!isMoving) {
        cancelSync.update(process);
        complete();
      }
    }, true);

    return {
      stop: () => cancelSync.update(process)
    };
github aholachek / animate-css-grid / src / index.ts View on Github external
const timeoutId = setTimeout(() => {
              sync.update(startAnimation);
            }, stagger * i);
            itemPosition.stopTween = () => clearTimeout(timeoutId);
github Popmotion / popmotion / packages / popmotion / src / animations / tween / index.ts View on Github external
const startTimer = () => {
        isActive = true;
        process = sync.update(({ delta }) => {
          elapsed += delta;
          updateTween();

          if (isTweenComplete()) {
            cancelSync.update(process);
            complete && sync.update(complete, false, true);
          }
        }, true);
      };