How to use the popmotion.css function in popmotion

}) {
    // DOM elements.
    this.track = track;
    this.train = train;
    this.setStyles = setStyles;
    this.reversed = reversed;
    this.minVelocity = minVelocity;

    this.currentAction = null;
    this.events = events;

    this.snapSettings = Object.assign({}, SNAP_SETTINGS, snapSettings);
    this.snap = snap === undefined && sleepers ? true : snap;
    this.sleeperIndex = 0;

    this.trainCSS = css(this.train);
    this.setOffset = x => this.currentOffset.set(x);
    this.getOffset = x => this.currentOffset.get(x);
    this.currentOffset = value(0, (x) => {
      if (typeof x !== 'number') return;
      if (this.setStyles) {
        this.trainCSS.set('x', x);
      }
      this.onUpdate(x);
    });

    this.bounds = sortDesc(bounds || this.calcBounds());
    this.sleepers = sleepers;
    this.sleepersArray = Array.isArray(sleepers) ? sleepers : this.generateSleepers(sleepers);

    if (this.reversed) {
      this.sleepersArray = this.sleepersArray.map(sleeper => sleeper * -1);

reversed: true,
  snap: false,
  snapSettings: { scrollFriction: 0.2, friction: 0.8, spring: 200 },
});

// With snapping points.
new Gleis({
  train: root.querySelector('#train3'),
  track: root.querySelector('#track3'),
  reversed: true,
  snap: true,
  sleepers: [-200, -400, -600, -800, -1000, -1200, -1400, -1600],
});

// Centered bounds.
const box2CSS = css(root.querySelector('#car2'));

new Gleis({
  train: root.querySelector('#train2'),
  track: root.querySelector('#track2'),
  bounds: [400, -400],
  snapSettings: { scrollFriction: 0.4, friction: 0.9, spring: 900 },
  sleepers: [0],
  events: {
    onUpdate(progress) {
      box2CSS.set({
        opacity: interpolate([0, 0.3, 0.7, 1], [0, 1, 1, 0])(progress),
        y: interpolate([0, 0.5, 1], [100, 0, 100])(progress),
        rotateZ: interpolate([0, 1], [90, -90])(progress),
      });
    },
  },

Object.keys(this.elementFrom).forEach(key => {
			const { element: original, options } = this.elementFrom[key];
			const { element: target } = this.elementTo[key];

			const originalRect = original.getBoundingClientRect();
			const targetRect = target.getBoundingClientRect();
			const originalCloneContainer = document.createElement("div");
			const originalClone = original.cloneNode(true);

			originalCloneContainer.appendChild(originalClone);

			const originalStyler = css(original);
			console.log("original: ", original);
			const cloneStyler = css(originalCloneContainer);
			const targetStyler = css(target);

			cloneStyler.set({
				position: "absolute",
				transformOrigin: "top left",
				pointerEvents: "none",
				top: originalRect.top,
				left: originalRect.left,
				width: originalRect.width,
				height: originalRect.height,
				...options
			});

			document.body.appendChild(originalCloneContainer);

Object.keys(this.elementFrom).forEach(key => {
			const { element: original, options } = this.elementFrom[key];
			const { element: target } = this.elementTo[key];

			const originalRect = original.getBoundingClientRect();
			const targetRect = target.getBoundingClientRect();
			const originalCloneContainer = document.createElement("div");
			const originalClone = original.cloneNode(true);

			originalCloneContainer.appendChild(originalClone);

			const originalStyler = css(original);
			console.log("original: ", original);
			const cloneStyler = css(originalCloneContainer);
			const targetStyler = css(target);

			cloneStyler.set({
				position: "absolute",
				transformOrigin: "top left",
				pointerEvents: "none",
				top: originalRect.top,
				left: originalRect.left,
				width: originalRect.width,
				height: originalRect.height,
				...options
			});

			document.body.appendChild(originalCloneContainer);

			const hide = styler => t =>

Object.keys(this.elementFrom).forEach(key => {
			const { element: original, options } = this.elementFrom[key];
			const { element: target } = this.elementTo[key];

			const originalRect = original.getBoundingClientRect();
			const targetRect = target.getBoundingClientRect();
			const originalCloneContainer = document.createElement("div");
			const originalClone = original.cloneNode(true);

			originalCloneContainer.appendChild(originalClone);

			const originalStyler = css(original);
			console.log("original: ", original);
			const cloneStyler = css(originalCloneContainer);
			const targetStyler = css(target);

			cloneStyler.set({
				position: "absolute",
				transformOrigin: "top left",
				pointerEvents: "none",
				top: originalRect.top,
				left: originalRect.left,
				width: originalRect.width,
				height: originalRect.height,
				...options
			});

			document.body.appendChild(originalCloneContainer);

			const hide = styler => t =>
				styler.set({ opacity: t, visibility: t ? "visible" : "hidden" });

componentDidMount() {
    const renderer = css(this.containerRef);
    const setBackgroundGradient = (i) => ({ top, bottom }) => { console.log(i);console.trace();renderer.set('background', verticalGradient(bottom, top));}

    const colorCycle = MAIN_COLORS.map((color, i) => {
      const nextIndex = MAIN_COLORS[i + 1] ? i + 1 : 0;
      const nextColor = MAIN_COLORS[nextIndex];
      const burnColor = BURN_COLORS[i];
      const nextBurnColor = BURN_COLORS[nextIndex];

      return composite({
        top: colorTween({
          from: color,
          to: nextColor,
          duration: COLOR_SEGMENT_DURATION,
          ease: easing.linear,
          i
        }),

const icons = [...root.querySelectorAll('.icon')].map(x => css(x));
const scaleIcon = index => pipe(interpolate([0, 1], [-1, index]), clamp(0, 1));

this.allocateShape.call(this);
    const { initial } = this.props;
    this.configs = {
      left: {
        initial: parseFloat(initial[0], 10),
        step: (50 - parseFloat(initial[0], 10)) / 100,
        alpha: parseFloat(initial[0], 10) > 50 ? -1 : 1,
      },
      bottom: {
        initial: parseFloat(initial[1], 10),
        step: (50 - parseFloat(initial[1], 10)) / 100,
        alpha: parseFloat(initial[1], 10) > 50 ? -1 : 1,
      },
    };

    this.shapeRenderer = css(this.shape);
    this.tween = tween({
      to: this.totalSteps,
      duration: 30,
      ease: easing.easeInOut,
      onUpdate: (x) => {
        const nextLeft = this.configs.left.initial +
          (this.props.percentage * this.configs.left.step);
        const nextBottom = this.configs.bottom.initial +
          (this.props.percentage * this.configs.bottom.step);
        this.progress = x;
        this.shapeRenderer.set('bottom', `${nextBottom}%`);
        this.shapeRenderer.set('left', `${nextLeft}%`);
      },
    });
  }

componentDidMount() {
    const pathDom = document.getElementById(ANIMATED_LOGO);
    const pathRenderer = svgPath(pathDom);
    const pathSvgRenderer = svg(pathDom);
    const containerRenderer = css(document.getElementById(SVG_ID));

    pathRenderer.set({
      length: 0,
      spacing: 100,
      offset: 0
    });

    pathSvgRenderer.set({
      strokeOpacity: 1
    });

    this.action = chain([
      tween({
        to: 15,
        duration: 800,
        ease: easing.easeIn,