How to use the popmotion.tween function in popmotion

});

			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 => {

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;
        },
      });
  }

flipH(reverse?:boolean){
    //DEBUG: console.log("**** FLIP ANIMATION ****");

    let start: number;
    let finish: number;

    if(!reverse){
      start = 0;
      finish = -180;
    } else {
      start = -180;
      finish = 0;
    }
    let s = tween({
      from: { rotateY: start, scale:1},
      to: { rotateY: finish, scale: 1 },
      //ease: easing.easeInOut,
      //flip: 0,
      duration: 500
    })
     return s;
  }

flipV(reverse?:boolean){
    //DEBUG: console.log("**** FLIP ANIMATION ****");

    let start: number;
    let finish: number;

    if(!reverse){
      start = 0;
      finish = -180;
    } else {
      start = -180;
      finish = 0;
    }
    let s = tween({
      from: { rotateX: start, scale:1},
      to: { rotateX: finish, scale: 1 },
      //ease: easing.easeInOut,
      //flip: 0,
      duration: 500
    })
     return s;
  }

position => {
        tween({
          from: this.position.get(),
          to: position,
          duration: 1000,
          ease: easing.easeInOut,
        }).start(this.position);
      },
      { equals: comparer.structural },

const closeMouth = tween({
      from: { scaleY: 1 },
      to: { scaleY: 0.3 },
      duration: 300,
      flip: 1,
    });

    const tongueDisappear = tween({
      from: { scaleY: 1 },
      to: { scaleY: 0 },
      duration: 300,
      flip: 1,
    });

    tween({
      from: { y: 10 },
      to: { y: 20 },
      easings: easing.easeOut,
      duration: 1500,
      yoyo: Infinity,
    }).start(body.set);

    const eyeLeftAction = action(({ complete }) => {
      showEye.start({
        update: eyeLeft.set,
        complete: () => {
          complete();
          setInterval(() => blinkEye.start({ update: eyeLeft.set }), 2000);
        },
      });
    });

shakeAnimation(){
    const s = tween({
      from: { rotate: -1.25, scale:1},
      to: { rotate: 1.25, scale: 1 },
      //ease: easing.easeInOut,
      flip: Infinity,
      duration: 100
    });

    const startShaking = () => { 
      const a = s.start({
        update:this.elStyler.set
      });
      return a;
    }

    if(!this.shaking){
      this.shaking  = startShaking();

const fadeOuts = this.fadeOutElements.map(({ element, options = {} }) =>
			tween({
				from: 1,
				to: 0,
				ease: easing.linear,
				duration: duration / 2,
				...options
			}).start(v => (element.style.opacity = v))
		);

const createState = (to: number) => (e: StateChangeEvent) =>
    tween({
      from: e.value.get(),
      to,
      duration,
      onUpdate: e.value,
    }).start()