How to use the popmotion.everyFrame function in popmotion

To help you get started, we’ve selected a few popmotion 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 / site / templates / Popmotion / LiveExamples / Three.js View on Github external
const gridSize = 20;
      const gridDivisions = 20;
      const gridHelper = new THREE.GridHelper(gridSize, gridDivisions, 0x14D790, 0x14D790);
      scene.add(gridHelper);
      
      // Add lights
      const spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(100, 1000, 100);
      scene.add(spotLight);
      const spotLight2 = new THREE.SpotLight(0xffffff);
      spotLight2.position.set(100, -1000, 100);
      scene.add(spotLight2);
      
      // Render loop
      const render = () => renderer.render(scene, camera);
      everyFrame().start(render);
      
      // Rotate camera
      tween({
        from: 0,
        to: 360,
        loop: Infinity,
        ease: easing.linear,
        duration: 12000
      }).start(cameraRotation);

      // Bounce ball
      const gravity = physics({
        from: sphereY.get(),
        acceleration: - 9.8,
        restSpeed: false
      }).start((v) => {
github Popmotion / popmotion / packages / site / templates / Popmotion / LiveExamples / Stepped.js View on Github external
listen(ref, 'mousedown touchstart').start(e => {
      e.preventDefault();
      schedule(everyFrame(), pointer(this.ballXY.get()))
        .pipe(smoothXY)
        .start(this.ballXY);
    });
github Popmotion / popmotion / packages / site / templates / Popmotion / LiveExamples / EveryFrame.js View on Github external
startAnimation() {
    this.animation = everyFrame().start(timestamp =>
      this.ballStylers.forEach((styler, i) => {
        styler.set('y', this.distance * Math.sin(0.004 * timestamp + i * 0.5));
      })
    );
  }
github lennerd / git-for-beginners / src / components / Visualisation.js View on Github external
if (this.ticking) {
      return;
    }

    this.ticking = true;

    this.renderer = new THREE.WebGLRenderer({
      canvas: this.canvas,
      antialias: true,
      alpha: true,
    });

    this.renderer.shadowMap.enabled = true;

    window.addEventListener('resize', this.handleResize);
    this.everyFrame = everyFrame().start(this.handleTick);

    this.handleResize();
    this.handleTick();
  }
github lennerd / git-for-beginners / src / models / chapters / utils.js View on Github external
action(({ complete }) => {
    const frame = everyFrame().start({
      update(timeSinceStart) {
        if (timeSinceStart >= timeToDelay) {
          complete();
          frame.stop();
        }
      },
    });

    return frame;
  });