How to use the velocity-animate function in velocity-animate

assert.equal(Data($target1).cache.backgroundColor, testStartValues.backgroundColor, "Undefined start value hook was calculated.");

	/* Properties previously defined on the element. */
	const $target2 = getTarget();

	Velocity($target2, defaultProperties);
	assert.equal(Data($target2).cache.width, parseFloat(defaultStyles.width as any), "Defined start value #1 was calculated.");
	assert.equal(Data($target2).cache.opacity, parseFloat(defaultStyles.opacity as any), "Defined start value #2 was calculated.");
	assert.equal(Data($target2).cache.color, parseFloat(defaultStyles.colorGreen as any), "Defined hooked start value was calculated.");

	/* Properties that shouldn't cause start values to be unit-converted. */
	const testPropertiesEndNoConvert = {paddingLeft: "20px", height: "40px", paddingRight: "75%"},
		$target3 = getTarget();

	applyStartValues($target3, testStartValues);
	Velocity($target3, testPropertiesEndNoConvert);
	assert.equal(Data($target3).cache.paddingLeft, parseFloat(testStartValues.paddingLeft), "Start value #1 wasn't unit converted.");
	assert.equal(Data($target3).cache.height, parseFloat(testStartValues.height), "Start value #2 wasn't unit converted.");
	//			assert.deepEqual(Data($target3).cache.paddingRight.startValue, [Math.floor((parentWidth * parseFloat(testStartValues.paddingRight)) / 100), 0],
	//			 "Start value #3 was pattern matched.");

	/* Properties that should cause start values to be unit-converted. */
	const testPropertiesEndConvert = {paddingLeft: "20%", height: "40%", lineHeight: "0.5em", wordSpacing: "2rem", marginLeft: "10vw", marginTop: "5vh", marginBottom: "100px"},
		parentWidth = $qunitStage.clientWidth,
		parentHeight = $qunitStage.clientHeight,
		parentFontSize = Velocity($qunitStage, "style", "fontSize"),
		remSize = parseFloat(Velocity(document.body, "style", "fontSize") as any),
		$target4 = getTarget();

	applyStartValues($target4, testStartValues);
	Velocity($target4, testPropertiesEndConvert);

asyncTests(assert, 1, (done) => {
		const $targetSet = [getTarget(), getTarget()];

		Velocity($targetSet, defaultProperties, {
			duration: asyncCheckDuration,
			begin(elements) {
				assert.deepEqual(elements, $targetSet, "Elements passed into callback.");

				done();
			},
		});
	});

asyncTests(assert, 1, (done) => {
		Velocity(getTarget(), defaultProperties, {
			duration,
			speed: 2,
			begin(elements: ExtendedVelocityExtended) {
				elements.__start = getNow();
			},
			complete(elements: ExtendedVelocityExtended) {
				const actual = getNow() - elements.__start,
					expected = duration / 2;

				assert.close(actual, expected, 32, `Double speed animation lasts half as long. (\xD72, ${Math.floor(actual - expected)}ms \xB132ms)`);

				done();
			},
		});
	});

animateExit() {
    const { slow } = this.props
    const node = findDOMNode(this)

    if (!node) {
      return
    }

    let promise = Velocity(
      node,
      { translateY: 100, opacity: 0.0 },
      { duration: slow ? 2000 : 1000, easing: 'easeOutCubic' }
    )

    promise.cancel = () => Velocity(node, 'stop')
    return promise
  }

/*
 * velocity-animate (C) 2014-2018 Julian Shapiro.
 *
 * Licensed under the MIT license. See LICENSE file in the project root for details.
 *
 * Based on animate.css: https://github.com/daneden/animate.css
 */

import Velocity from "velocity-animate";

Velocity("registerSequence", "rotateOutUpRight", {
	"duration": 1000,
	"0%": {
		opacity: "1",
		transform: "translate3d(0,0,0)",
		transformOrigin: "right bottom",
	},
	"100%": {
		opacity: "0",
		transform: "rotate3d(0,0,1,90deg)",
		transformOrigin: "right bottom",
	},
});

/*
 * velocity-animate (C) 2014-2018 Julian Shapiro.
 *
 * Licensed under the MIT license. See LICENSE file in the project root for details.
 *
 * Based on animate.css: https://github.com/daneden/animate.css
 */

import Velocity from "velocity-animate";

Velocity("registerSequence", "wobble", {
	"duration": 1000,
	"0%": {
		transform: "translate3d(0,0,0) rotate3d(0,0,0,0)",
	},
	"15%": {
		transform: "translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)",
	},
	"30%": {
		transform: "translate3d(20%,0,0) rotate3d(0,0,1,3deg)",
	},
	"45%": {
		transform: "translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)",
	},
	"60%": {
		transform: "translate3d(10%,0,0) rotate3d(0,0,1,2deg)",
	},

/*
 * velocity-animate (C) 2014-2018 Julian Shapiro.
 *
 * Licensed under the MIT license. See LICENSE file in the project root for details.
 *
 * Based on animate.css: https://github.com/daneden/animate.css
 */

import Velocity from "velocity-animate";

Velocity("registerSequence", "fadeIn", {
	"duration": 1000,
	"0%": {
		opacity: "0",
	},
	"100%": {
		opacity: "1",
	},
});

/*
 * velocity-animate (C) 2014-2018 Julian Shapiro.
 *
 * Licensed under the MIT license. See LICENSE file in the project root for details.
 *
 * Based on animate.css: https://github.com/daneden/animate.css
 */

import Velocity from "velocity-animate";

Velocity("registerSequence", "fadeInLeft", {
	"duration": 1000,
	"0%": {
		opacity: "0",
		transform: "translate3d(-100%,0,0)",
	},
	"100%": {
		opacity: "1",
		transform: "translate3d(0,0,0)",
	},
});

handleHide() {
        if (!this.visible) {
            return;
        }

        velocity(this.tooltip, 'stop').then(() => {
            velocity(this.tooltip, 'fadeOut').then(() => {
                this.tooltip.classList.remove('in');
            });
        });

        this.visible = false;
        this.open = false;
    }

rewind(element:HTMLElement): VelocityAnimator {
    velocity(name, 'rewind');
    return this;
  }