How to use popmotion - 10 common examples

});

			const fadeIn = keyframes({
				values: [{ opacity: 0 }, { opacity: 1 }],
				easings: easing.linear
				// times: [0.9, 1]
			});

			// const fadeInOnce = onceDifferent(s => {
			// 	console.log("s: ", s);
			// 	fadeIn.start(targetStyler.set);
			// });
			// fadeOut.start(cloneStyler.set);

			// Image bg fix.
			const bgFix = tween({
				from: diffTargetStyles.scaleX * 1000,
				to: 100,
				easings: easing.linear
			})
				.start(s => {
					// if (key === 'cover') console.log('s: ', s);
					originalClone.style.backgroundSize = `${s}% 100%`;
				})
				.pause();

			// tween({
			// 	from: diffTargetStyles.scaleY * 1000,
			// 	to: 100,
			// 	easings: easing.linear,
			// 	duration
			// }).start(s => {

exit(className){ // stage-left or stage-right or full-stage
    let html = this.overview.nativeElement.querySelector('.' + className + '.' + this.exitingView);
    let el = styler(html, {});
    let duration = 360;

    // x is the position relative to it's starting point.
    const w = el.get('width');
    const startX = 0;
    let endX = className == 'stage-left' ? w * -1 : w;
    if(className == 'full-stage'){ 
      endX = startX;
      duration = 10;
    }

    // Move stage left
    tween({
      from:{opacity:1, x:0},
      to:{
        opacity:0,

targetStyler.set({
				"transform-origin": "top left",
				visibility: "visible"
			});

			const diffTargetStyles = diffRect(originalRect, targetRect);

			const translateFrom = keyframes({
				values: [
					{ ...diffTargetStyles },
					{ translateX: 0, translateY: 0, scaleX: 1, scaleY: 1 }
				],
				easings: easing.linear
			});

			const fadeIn = keyframes({
				values: [{ opacity: 0 }, { opacity: 1 }],
				easings: easing.linear
				// times: [0.9, 1]
			});

			// const fadeInOnce = onceDifferent(s => {
			// 	console.log("s: ", s);
			// 	fadeIn.start(targetStyler.set);
			// });
			// fadeOut.start(cloneStyler.set);

			// Image bg fix.
			const bgFix = tween({
				from: diffTargetStyles.scaleX * 1000,
				to: 100,
				easings: easing.linear

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) => {
        if (v <= 1) {
          v = 1;
          gravity.setVelocity(10);

left.styler.set('x', `${x - 100}%`);
              right.styler.set('x', `${x + 100}%`);
            }
        : (left &&
            (x => {
              toShow.styler.set('x', `${x}%`);
              left.styler.set('x', `${x - 100}%`);
            })) ||
          (right &&
            (x => {
              toShow.styler.set('x', `${x}%`);
              right.styler.set('x', `${x + 100}%`);
            })) ||
          (x => toShow.styler.set('x', `${x}%`));

    popmotion
      .tween({
        from: start,
        to: 0,
        ease,
        // duration,
        duration: (duration * Math.abs(start)) / 100,
      })
      .start({
        update,
        complete: () => {
          this.isMoving = false;
          this.delta = 0;
        },
      });
  }

radiate(kill?:boolean){ 
    // Animation
    if(this.identifyBtnRef){

      // kill the animation
      this.identifyBtnRef.animation.seek(0);
      this.identifyBtnRef.animation.stop(this.identifyBtnRef.styler);
      this.identifyBtnRef = null;
      return ;

    } else if(!this.identifyBtnRef && !kill) {

      let btn = styler(this.details.nativeElement.querySelector('#identify-btn'), {});
      let startShadow = btn.get('box-shadow');

      const elementBorder = value({borderColor: '', borderWidth: 0 }, ({ borderColor, borderWidth }) => btn.set({
        boxShadow: `0 0 0 ${borderWidth}px ${borderColor}` 
      }));

      // Convert color to rgb value
      let cc = this.hexToRGB(this.theme.cyan);
      const animation = keyframes({
        values: [
          { borderWidth: 0, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] +', ' + cc.rgb[2] +')' },
          { borderWidth: 30, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] + ', ' + cc.rgb[2] + ', 0)' } 
        ],
        duration:1000,
        loop: Infinity
      }).start(elementBorder);

key: string,
  to: any
) => {
  if (values.has(key)) {
    // Here, if we already have the value, we update it twice.
    // Because of stylefire's render batching, this isn't going
    // to actually render twice, but because we're making
    // the value jump a great distance, we want to reset the velocity
    // to 0, rather than something arbitrarily high
    // A more explicit API would be nicer
    const { raw } = values.get(key);
    raw.update(to);
    raw.update(to);
  } else {
    values.set(key, {
      raw: value(to, (v: any) => props.elementStyler.set(key, v))
    });
  }
};

this.popupMesh = new THREE.Mesh(
      this.popupGeometry,
      new THREE.MeshBasicMaterial({
        color: theme.color.highlight,
        transparent: true,
      }),
    );

    // Look at camera
    this.popupMesh.lookAt(-1, 1, -1);
    this.textMesh.position.z = 0.01;

    this.popupMesh.add(this.textMesh);
    this.popupObject.add(this.popupMesh);

    this.appearance = value(
      {
        level: this.level,
        opacity: this.opacity,
        textOpacity: this.textOpacity,
        offset: this.offset,
      },
      ({ level, opacity, textOpacity, offset }) => {
        this.popupObject.position.y = LEVEL_HEIGHT * level;
        this.popupObject.position.x = offset;
        this.textMesh.material.opacity = textOpacity;
        this.popupMesh.material.opacity = opacity;
      },
    );
  }

radiate(kill?:boolean){ 
    // Animation
    if(this.identifyBtnRef){

      // kill the animation
      this.identifyBtnRef.animation.seek(0);
      this.identifyBtnRef.animation.stop(this.identifyBtnRef.styler);
      this.identifyBtnRef = null;
      return ;

    } else if(!this.identifyBtnRef && !kill) {

      let btn = styler(this.details.nativeElement.querySelector('#identify-btn'), {});
      let startShadow = btn.get('box-shadow');

      const elementBorder = value({borderColor: '', borderWidth: 0 }, ({ borderColor, borderWidth }) => btn.set({
        boxShadow: `0 0 0 ${borderWidth}px ${borderColor}` 
      }));

      // Convert color to rgb value
      let cc = this.hexToRGB(this.theme.cyan);
      const animation = keyframes({
        values: [
          { borderWidth: 0, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] +', ' + cc.rgb[2] +')' },
          { borderWidth: 30, borderColor: 'rgb(' + cc.rgb[0] +', ' + cc.rgb[1] + ', ' + cc.rgb[2] + ', 0)' } 
        ],
        duration:1000,
        loop: Infinity
      }).start(elementBorder);

      this.identifyBtnRef = { animation: animation, originalState: startShadow, styler: elementBorder};

}).start(viewer);
  };

  if (reset) {
    reset.addEventListener('click', () => {
      // const bounds = runtime.getBounds(panPadding);
      // viewer.update({
      //   x: bounds.x1,
      //   y: bounds.x2,
      // });

      constrainBounds();
    });
  }

  listen(document, 'mouseup touchend').start(constrainBounds);

  // A generic zoom to function, with an optional origin parameter.
  // All of the points referenced are world points. You can pass your
  // own in or it will simply default to the middle of the viewport.
  // Note: the factor changes the size of the VIEWPORT on the canvas.
  // So smaller values will zoom in, and larger values will zoom out.
  let currentZoom: ColdSubscription | undefined;
  function zoomTo(factor: number, origin?: Position, stream: boolean = false) {
    if (factor < 1 && runtime.scaleFactor / factor > (1 / minZoomFactor) * devicePixelRatio) {
      factor = runtime.scaleFactor * (minZoomFactor / devicePixelRatio);
    }
    if (factor >= 1 && runtime.scaleFactor / factor < 1 / maxZoomFactor) {
      factor = runtime.scaleFactor;
    }
    // Save the before for the tween.
    const fromPos = runtime.getViewport();