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

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

/**
           * 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, 'backgroundPositionY', bgOffset * ctx.parent.$ksvuefp.wHeight + 'px')

          animObj['backgroundPositionY'] = '0%'
        }

        const start = ctx.parent.$ksvuefp.sliderDirection === 'up' ? '-100%' : '100%'
        Velocity.hook(el, 'translateY', start)
        Velocity.hook(el, 'translateX', '0%')
        Velocity.hook(el, 'opacity', 1)

        animObj['translateY'] = '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
         * @param  el - the element

enter (el, done) {
        const animObj = {}
        switch (ctx.props.currentPos) {
          case 'top':
            Velocity.hook(el, 'translateY', '-200px')
            animObj['translateY'] = '0px'
            break
          case 'bottom':
            Velocity.hook(el, 'translateY', '200px')
            animObj['translateY'] = '0px'
            break
          case 'left':
            Velocity.hook(el, 'translateX', '-200px')
            animObj['translateX'] = '0px'
            break
          case 'right':
            Velocity.hook(el, 'translateX', '200px')
            animObj['translateX'] = '0px'
            break
        }
        Velocity(

enter (el, done) {
        const animObj = {}
        switch (ctx.props.currentPos) {
          case 'top':
            Velocity.hook(el, 'translateY', '-200px')
            animObj['translateY'] = '0px'
            break
          case 'bottom':
            Velocity.hook(el, 'translateY', '200px')
            animObj['translateY'] = '0px'
            break
          case 'left':
            Velocity.hook(el, 'translateX', '-200px')
            animObj['translateX'] = '0px'
            break
          case 'right':
            Velocity.hook(el, 'translateX', '200px')
            animObj['translateX'] = '0px'
            break
        }
        Velocity(
          el,
          animObj,
          {
            delay: el.dataset.index * 40,
            complete: done
          }
        )
      },

enter (el, done) {
        const animObj = {}
        switch (ctx.props.currentPos) {
          case 'top':
            Velocity.hook(el, 'translateY', '-200px')
            animObj['translateY'] = '0px'
            break
          case 'bottom':
            Velocity.hook(el, 'translateY', '200px')
            animObj['translateY'] = '0px'
            break
          case 'left':
            Velocity.hook(el, 'translateX', '-200px')
            animObj['translateX'] = '0px'
            break
          case 'right':
            Velocity.hook(el, 'translateX', '200px')
            animObj['translateX'] = '0px'
            break
        }
        Velocity(
          el,
          animObj,
          {
            delay: el.dataset.index * 40,

const animObj = {}
        switch (ctx.props.currentPos) {
          case 'top':
            Velocity.hook(el, 'translateY', '-200px')
            animObj['translateY'] = '0px'
            break
          case 'bottom':
            Velocity.hook(el, 'translateY', '200px')
            animObj['translateY'] = '0px'
            break
          case 'left':
            Velocity.hook(el, 'translateX', '-200px')
            animObj['translateX'] = '0px'
            break
          case 'right':
            Velocity.hook(el, 'translateX', '200px')
            animObj['translateX'] = '0px'
            break
        }
        Velocity(
          el,
          animObj,
          {
            delay: el.dataset.index * 40,
            complete: done
          }
        )
      },
      leave (el, done) {