How to use velocity-animate - 10 common examples

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

.velocity("stop");
	} catch {
		// We don't care if it fails.
	}
	// Free all targets requested by the current test.
	while (targets.length) {
		try {
			$qunitStage.removeChild(targets.pop());
		} catch {
			// We don't care if it fails.
		}
	}
	// Ensure we have reset the test counter.
	asyncTests();
	// Make sure Velocity goes back to defaults.
	Velocity.defaults.reset();
});

testFrame = (frameRate) => {
			let counter = 0;

			Velocity.defaults.fpsLimit = frameRate;
			// Test if the frame rate is assigned succesfully.
			assert.equal(frameRate, Velocity.defaults.fpsLimit, "Setting global fps limit to " + frameRate);

			return Velocity($target, defaultProperties,
				{
					duration: 1000,
					progress() {
						counter++;
					},
				})
				.then(() => counter);
		};

testFrame = (frameRate) => {
			let counter = 0;

			Velocity.defaults.fpsLimit = frameRate;
			// Test if the frame rate is assigned succesfully.
			assert.equal(frameRate, Velocity.defaults.fpsLimit, "Setting global fps limit to " + frameRate);

			return Velocity($target, defaultProperties,
				{
					duration: 1000,
					progress() {
						counter++;
					},
				})
				.then(() => counter);
		};

import utilsAPI from './lib/utils/api';
import { init as initTransformers } from './inputs/magic-button-transformers';
import { hasClickedFocusableEl } from './lib/decorators/focus';
import { hasClickedSelectableEl } from './lib/decorators/select';
import { META_PRESS, META_UNPRESS } from './lib/preloader/mutationTypes';
import { getEventPath } from './lib/utils/events';
import { standardCurve } from './lib/utils/references';
import { getLastEditUser } from './lib/utils/history';
import 'keen-ui/src/bootstrap'; // import this once, for KeenUI components
import 'velocity-animate/velocity.ui.min.js'; // import this once, for velocity ui stuff
import VueObserveVisibility from 'vue-observe-visibility';
import VueClickOutside from 'vue-click-outside';

// set animation defaults
velocity.defaults.easing = standardCurve;
velocity.defaults.queue = false;

const inputReq = require.context('./inputs', false, /\.vue$/),
  // todo: in the future, we should queue up the saves
  connectionLostMessage = 'Connection Lost. Changes will <strong>NOT</strong> be saved.',
  progressOptions = {
    parent: '.nprogress-container',
    template: '<div role="bar" class="bar"></div>',
    showSpinner: false,
    easing: 'linear',
    speed: 500,
    trickle: false,
    minimum: 0.001
  },
  nprogress = new NProgress(progressOptions),
  // shortKey is a Quill convention to test for cmd on mac and ctrl on windows
  SHORTKEY = (/Mac/i).test(navigator.platform) ? 'metaKey' : 'ctrlKey';

componentDidMount: function() {
		var me = this;

		// Hook styles
		for (var key in this.state.startStyles) {
			Velocity.hook(this.getDOMNode(), key, this.state.startStyles[key]);
		}

		this.setState({ mounted: true });
		this.getDOMNode().style.display = 'block';

		var options = {
			duration: this.state.duration,
			easing: this.state.easing,
			complete: function () {
				me.getDOMNode().classList.add('loaded-page');
				me.state.callback();
			}
		};

		Velocity(this.getDOMNode(),
			this.state.endStyles,

enter (el, done) {
        const animObj = {} // empty object where we'll push animations

        if (ctx.props.options.parallax) { // if parallax is activated
          /**
           * Get section background's offset and store it in a constant
           * @param {string} action - enter or leave
           * @param {string} direction - up or down
           * @param {float} offset - the parallax offset defined in options
          */
          const bgOffset = utils.bgOffset('enter', ctx.parent.$ksvuefp.sliderDirection, ctx.props.options.parallaxOffset)

          Velocity.hook(el, 'backgroundPositionX', bgOffset * ctx.parent.$ksvuefp.wWidth + 'px') // Positionate the background before triggering the animation

          animObj['backgroundPosition'] = '0% 50%' // Push bgPosition animation to our empty object animObj
        }

        const start = ctx.parent.$ksvuefp.sliderDirection === 'up' ? '-100%' : '100%' // Define the full section's translate animation starting offset
        Velocity.hook(el, 'translateX', start) // Positionate the full section before triggering the animation
        Velocity.hook(el, 'translateY', '0%') // Positionate the full section before triggering the animation
        Velocity.hook(el, 'opacity', 1)

        animObj['translateX'] = '0%'
        animObj['translateZ'] = 0 // Force 3d rendering

        /**
         * Get animations params
         * @param {object} ctx - the context
         * @param {object} animObj - the animObject

enter: function (el, done) {
        Velocity.hook(el, 'translateX', '0%') // Positionate the full section before triggering the animation
        Velocity.hook(el, 'translateY', '0%') // Positionate the full section before triggering the animation
        Velocity.hook(el, 'opacity', 0)

        /**
         * Get animations params
         * @param {object} ctx - the context
         * @param {object} animObj - the animObject
         * @param {function} animParams - Velocity's animation options
        */
        const animParams = getAnimParams(ctx, el, done)

        /**
         * Velocity anim function
         * @param  el - the element
         * @param {object} animObj - the animObject
         * @param {function} animParams - Velocity's animation options
        */
        Velocity(

if (ctx.props.options.parallax) { // if parallax is activated
          /**
           * Get section background's offset and store it in a constant
           * @param {string} action - enter or leave
           * @param {string} direction - up or down
           * @param {float} offset - the parallax offset defined in options
          */
          const bgOffset = utils.bgOffset('enter', ctx.parent.$ksvuefp.sliderDirection, ctx.props.options.parallaxOffset)

          Velocity.hook(el, 'backgroundPositionX', bgOffset * ctx.parent.$ksvuefp.wWidth + 'px') // Positionate the background before triggering the animation

          animObj['backgroundPosition'] = '0% 50%' // Push bgPosition animation to our empty object animObj
        }

        const start = ctx.parent.$ksvuefp.sliderDirection === 'up' ? '-100%' : '100%' // Define the full section's translate animation starting offset
        Velocity.hook(el, 'translateX', start) // Positionate the full section before triggering the animation
        Velocity.hook(el, 'translateY', '0%') // Positionate the full section before triggering the animation
        Velocity.hook(el, 'opacity', 1)

        animObj['translateX'] = '0%'
        animObj['translateZ'] = 0 // Force 3d rendering

        /**
         * Get animations params
         * @param {object} ctx - the context
         * @param {object} animObj - the animObject
         * @param {function} animParams - Velocity's animation options
        */
        const animParams = getAnimParams(ctx, el, done)

        /**
         * Velocity anim function

if (ctx.props.options.parallax) { // if parallax is activated
          /**
           * Get section background's offset and store it in a constant
           * @param {string} action - enter or leave
           * @param {string} direction - up or down
           * @param {float} offset - the parallax offset defined in options
          */
          const bgOffset = utils.bgOffset('leave', ctx.parent.$ksvuefp.sliderDirection, ctx.props.options.parallaxOffset)

          animObj['backgroundPositionX'] = bgOffset * ctx.parent.$ksvuefp.wWidth + 'px' // Push bgPosition animation to our empty object animObj
        }

        const end = ctx.parent.$ksvuefp.sliderDirection === 'up' ? '100%' : '-100%' // Define the full section's translate animation starting offset
        Velocity.hook(el, 'translateX', '0%')// Positionate the full section before triggering the animation
        Velocity.hook(el, 'translateY', '0%')// Positionate the full section before triggering the animation
        Velocity.hook(el, 'opacity', 1)

        animObj['translateX'] = end // Push translate animation to our object animObj
        animObj['translateZ'] = 0 // Force 3d rendering

        /**
         * Get animations params
         * @param {object} ctx - the context
         * @param {object} animObj - the animObject
         * @param {function} animParams - Velocity's animation options
        */
        const animParams = getAnimParams(ctx, el, done)

        /**
         * Velocity anim function
         * @param  el - the element
         * @param {object} animObj - the animObject