Popmotion animation/tween

Popmotion is integrated within WebGi and is used by various plugins for scheduling animations.

PopmotionPlugin provides some helpers and state management for playing animations through popmotion First, add the plugin to the viewer:

import {EasingFunctions, PopmotionPlugin, timeout} from 'webgi'
const popmotion = await viewer.addPlugin(PopmotionPlugin)

Start an animation:

const anim = popmotion.animate({
    from: 0,
    to: 1,
    duration: 3000,
    repeat: 3,
    repeatType: "mirror",
    ease: EasingFunctions.linear,
    onUpdate: (v)=>{
      // Update object position
      obj.modelObject.position.x = v;
      viewer.setDirty();
      // or 
      // obj.modelObject.setDirty();
      
      console.log(v);
    }
  }) // Returned animation is started.

// Wait for the animation to finish
await anim.promise

Check Popmotion docs for information and options: https://popmotion.io/#quick-start-animation-animate

To stop an animation in between:

anim.stop()

note

PopmotionPlugin attaches a default driver to all the animations (if not provided). This default driver sync the animation with the render loop, recording and other plugins.

Check the full example on codepen with PopmotionPlugin used to animate a sphere: