How to use the popmotion.styler function in popmotion

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,

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

componentDidMount() {
    const mouth = styler(
      this.planetRef.current.querySelector('#Combined-Shape')
    );
    const tongue = styler(
      this.planetRef.current.querySelector('#kawaii-face__tongue')
    );
    const eyeLeft = styler(
      this.planetRef.current.querySelector(
        '#kawaii-face__eyes__arc path:first-child'
      )
    );
    const eyeRight = styler(
      this.planetRef.current.querySelector(
        '#kawaii-face__eyes__arc path:last-child'
      )
    );
    const body = styler(this.planetRef.current.querySelector('svg'));

    const showEye = tween({
      from: { scaleY: 0, opacity: 1 },
      to: { scaleY: 1 },
      duration: 200
    });

    const show = tween({
      from: { scaleY: 0, opacity: 1 },
      to: { scaleY: 1 },
      duration: 200

const transitionContentsIn = (el, direction, tweenConfig) => {
  tween({
    from: {
      translateX: direction === "forwards" ? -translateDistance : translateDistance,
      opacity: 0
    },
    to: { translateX: 0, opacity: 1 },
    ...tweenConfig
  }).start(styler(el).set)
}

private onExiting = (node: HTMLElement) => {
        const nodeStyler = styler(node);
        chain(
            tween({from: {opacity: 1}, to: {opacity: 0}, duration: ANIMATION_DURATION}),
            action(({update, complete}) => {
                update({display: 'none'});
                complete();
            }),
        ).start(nodeStyler.set);
    }

private mounted(): void {
    this.itemWrapper = styler(this.$refs.itemWrapper as Element, {});
    this.indicator = styler(this.$refs.indicator as Element, {});
    this.itemWrapperHeight =
      this.$children
        .filter(c => c instanceof VdMenuItem || c instanceof VdMenuItemGroup)
        .reduce((acc, cur) => acc + cur.$el.offsetHeight, 0) +
      (this.$refs.itemWrapper as HTMLElement).clientHeight;
  }

componentDidMount() {
    const arrangement = {
      target: this.props.target,
      frame: this.props.frame,
      tip: this.popoverRef.current!.querySelector(".Popover-tip")!,
      popover: this.popoverRef.current!.querySelector(".Popover-body")!,
    }

    const popoverStyle = Popmotion.styler(this.popoverRef.current!, {})
    const tipStyle = Popmotion.styler(arrangement.tip, {})

    this.popoverReaction.subscribe(popoverStyle.set)
    this.tipReaction.subscribe(tipStyle.set)

    const layoutChanges = Forto.DOM.observe(
      {
        elligibleZones: this.props.place,
        preferredZones: this.props.preferPlace,
        pollIntervalMs: this.props.refreshIntervalMs || 1000,
        boundingMode: "always",
        tipSize: this.props.tipSize,
      },
      arrangement,
    )

    let initialLayout = true

componentDidMount() {
    const mouth = styler(this.ghostRef.current.querySelector('#Combined-Shape'));
    const tongue = styler(this.ghostRef.current.querySelector('#kawaii-face__tongue'));
    const eyeLeft = styler(
      this.ghostRef.current.querySelector('#kawaii-face__eyes__arc path:first-child'),
    );
    const eyeRight = styler(
      this.ghostRef.current.querySelector('#kawaii-face__eyes__arc path:last-child'),
    );
    const body = styler(this.ghostRef.current.querySelector('svg'));

    const showEye = tween({
      from: { scaleY: 0 },
      to: { scaleY: 1 },
      duration: 200,
    });

    const show = tween({
      from: { scaleY: 0 },
      to: { scaleY: 1 },
      duration: 200,
    });

    const blinkEye = tween({
      from: { scaleY: 1 },
      to: { scaleY: 0.3 },

updateSlidePosition(value){
    if(value.toString() == this.currentSlide){ return; }
    const carousel = this.carouselParent.nativeElement.querySelector('.carousel');
    const slide = this.carouselParent.nativeElement.querySelector('.slide');

    let el = styler(carousel);
    let slideW = styler(slide).get('width');

    tween({
      from:{ x: (parseInt(this.currentSlide) * 100) * -1 },
      to:{ x: (value * slideW) * -1 },
      duration: 250
    }).start(el.set);
    
    this.currentSlide = value.toString();
    this.title = this.currentSlide == "0" ? "Interface" : this.nicState.name;
    
  }

startAnimation = ball => {
    if (!ball) return;

    const ballStyler = styler(ball);
    const ballY = value(0, v => ballStyler.set('y', Math.min(0, v)));
    const ballScale = value(1, v => {
      ballStyler.set('scaleX', 1 + (1 - v));
      ballStyler.set('scaleY', v);
    });
    let count = 0;
    let isFalling = false;

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