How to use popmotion-pose - 10 common examples

onDragEnd: this.$listeners['drag-end']
          ? (e: any) => this.$emit('drag-end', e)
          : undefined,
        onPressStart: this.$listeners['press-start']
          ? (e: any) => this.$emit('press-start', e)
          : undefined,
        onPressEnd: this.$listeners['press-end']
          ? (e: any) => this.$emit('press-end', e)
          : undefined,
        onChange: this.$props.onValueChange,
        props: this.getPoserProps()
      };

      // First posed component in tree
      if (!this.$props.withParent || !this._poseRegisterChild) {
        this.initPoser(poseFactory(this.$el, poserConfig));
      } else {
        this._poseRegisterChild({
          element: this.$el,
          config: poserConfig,
          onRegistered: poser => this.initPoser(poser)
        } as ChildRegistration);
      }
    },
    watch,

const config: DomPopmotionConfig = {
      ...this.poseConfig,
      initialPose: this.getInitialPose(),
      values: values || this.poseConfig.values,
      parentValues: parentValues ? objectToMap(parentValues) : undefined,
      props: this.getSetProps(),
      onDragStart,
      onDragEnd,
      onPressStart,
      onPressEnd,
      onChange: onValueChange
    };

    // If first in tree
    if (!registerChild) {
      this.initPoser(poseFactory(this.ref, config));
    } else {
      registerChild({
        element: this.ref,
        poseConfig: config,
        onRegistered: (poser: DomPopmotionPoser) => this.initPoser(poser)
      });
    }
  }

setupCoverAnimation() {
    const transition = {
      type: 'spring',
      stiffness: 800,
      mass: 1,
      damping: 30,
      // velocity: 1,
    };
    this.coverPoser = pose(this.coverTarget.parentElement, {
      init: {
        scale: .9,
        y: '0%',
        transition: {...transition, damping: 60},
      },
      elevated: {
        scale: 1,
        y: '-3%',
        transition,
      },
    });
    this.coverPoser.addChild(this.coverShadowTarget, {
      init: {
        y: '-10%',
        opacity: .33,
        transition: {...transition, damping: 60},

): TransitionHandler => (el, done) => {
  if (!PoserMap.has(el)) {
    PoserMap.set(
      el,
      poserFactory(el, { ...defaultConfig, initialPose: fromPose })
    );
  }

  PoserMap.get(el)
    .set(toPose)
    .then(function() {
      that.$emit('poseComplete', toPose);
      done();
    });
};

componentDidMount() {
    if (!this.ref) return;

    this.poser = pose(this.ref, this.getPoseProps());
    const { onMount } = this.props;
    if (onMount) onMount(this.poser);
    if (this.children.size) this.children.forEach(child => this.poser.addChild(child));
  }

setRef = ref => {
    if (ref) {
      this.poser = pose(ref, {
        visible: {
          backgroundImage:
            'radial-gradient(circle at 50%, #333, #333 50%, #eee 75%, #333 75%)'
        },
        hidden: {
          backgroundImage:
            'radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%)'
        },
        initialPose: 'hidden'
      });
      this.poser.set('visible');
    } else {
      this.poser.destroy();
    }
  };

componentDidMount() {
    this.modalPoser = pose(this.ref, modalProps);
    this.listRefs.forEach(el => this.modalPoser.addChild(el, modalItemProps));
    this.listRefs.clear();

    this.interval = setInterval(() => {
      this.modalPoser.set('itemsOut').then(() => {
        this.modalPoser.clearChildren();
        this.modalPoser.measure();
        this.setState({
          list: this.state.list === this.a ? this.b : this.a
        });
      });
    }, 5000);
  }

componentDidMount() {
    this.sidebarPoser = pose(this.sidebar, sidebarProps);
    this.items.forEach(item =>
      this.sidebarPoser.addChild(item, passiveModalItemProps)
    );

    setTimeout(() => this.sidebarPoser.set('open'), 1000);
  }

componentDidMount() {
    const x = value('-100%');

    this.sidebarPoser = pose(this.sidebar, {
      ...sidebarProps,
      values: {
        x
      }
    });

    setTimeout(() => x.update('50%'), 3000);

    this.items.forEach(item =>
      this.sidebarPoser.addChild(item, passiveModalItemProps)
    );

    setTimeout(() => this.sidebarPoser.set('open'), 1000);
  }

PoseElement.prototype.componentDidMount = function () {
        var _this = this;
        invariant(typeof this.ref !== 'undefined', "No DOM ref found. If you're converting an existing component via posed(Component), you must ensure you're passing the hostRef prop to your underlying DOM element.");
        var _a = this.props, poseConfig = _a.poseConfig, onValueChange = _a.onValueChange, registerChild = _a.registerChild, values = _a.values, parentValues = _a.parentValues, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
        var config = __assign({}, poseConfig, { initialPose: this.getInitialPose(), values: values || poseConfig.values, parentValues: parentValues ? objectToMap(parentValues) : undefined, props: this.getSetProps(), onDragStart: onDragStart,
            onDragEnd: onDragEnd, onChange: onValueChange });
        if (!registerChild) {
            this.initPoser(poseFactory(this.ref, config));
        }
        else {
            registerChild({
                element: this.ref,
                poseConfig: config,
                onRegistered: function (poser) { return _this.initPoser(poser); }
            });
        }
    };
    PoseElement.prototype.UNSAFE_componentWillUpdate = function (_a) {