My svg animation start only when I arrive at the bottom with vivus.js

Question

Here is my issue:

I have a svg quite tall ( 1220px height, setup in the viewbox).

as you can see below:

<svg version="1.1" id="one-diagonal" viewBox="0 0 1160 1220" >
<g>
  <style type="text/css">
 .st1{fill:none;stroke:#939598;stroke-width:1;stroke-miterlimit:10;}
 </style>
 <defs>
</defs>
<line id="XMLID_64489_" class="st1" x1="710" y1="1" x2="0" y2="1212.9"/>
</svg>

I'm using vivus to animate all my svg:

  function easeOutBounce (x) {
    var base = -Math.cos(x * (0.5 * Math.PI)) + 1;
    var rate = Math.pow(base,1.5);
    var rateR = Math.pow(1 - x, 2);
    var progress = -Math.abs(Math.cos(rate * (2.5 * Math.PI) )) + 1;
    return (1- rateR) + (progress * rateR);
  }

  var timing,
    timingProps = {
      type: 'delayed',
      duration: 150,
      start: 'autostart',
      pathTimingFunction: Vivus.LINEAR,
      animTimingFunction: Vivus.LINEAR
    };

  function timingTest (buttonEl, property, type) {
    var activeSibling = buttonEl.parentNode.querySelector('button.active');
    activeSibling.classList.remove('active');
    buttonEl.classList.add('active');

    timingProps.type = (property === 'type') ? type : timingProps.type;
    timingProps.pathTimingFunction = (property === 'path') ? Vivus[type] : timingProps.pathTimingFunction;
    timingProps.animTimingFunction = (property === 'anim') ? Vivus[type] : timingProps.animTimingFunction;

    timing && timing.stop().destroy();
    timing = new Vivus('timing-example', timingProps);
  }


    pola = new Vivus('one-diagonal', {type: 'delayed', duration: 50, forceRender: true, animTimingFunction: Vivus.EASE

});

The problem I'm having, is as the viewbox is setup for 1220px height, the animation start only when i arrive at the bottom of the svg !

you can see a live example here: http://codepen.io/anon/pen/GZJvLm

I can see the code in the script of vivus.js using the viewport, but can't make it work If i play around ( If this make more clear ?)

    /**
    * Reply if an element is in the page viewport
    *
    * @param  {object} el Element to observe
   * @param  {number} h  Percentage of height
  * @return {boolean}
  */
 Vivus.prototype.isInViewport = function (el, h) {
var scrolled   = this.scrollY(),
viewed       = scrolled + this.getViewportH(),
elBCR        = el.getBoundingClientRect(),
elHeight     = elBCR.height,
elTop        = scrolled + elBCR.top,
elBottom     = elTop + elHeight;

// if 0, the element is considered in the viewport as soon as it enters.
// if 1, the element is considered in the viewport only when it's fully inside
// value in percentage (1 >= h >= 0)
h = h || 0;

return (elTop + elHeight * h) <= viewed && (elBottom) >= scrolled;
};

/**
* Alias for document element
*
* @type {DOMelement}
*/
Vivus.prototype.docElem = window.document.documentElement;

/**
* Get the viewport height in pixels
*
* @return {integer} Viewport height
*/
Vivus.prototype.getViewportH = function () {
var client = this.docElem.clientHeight,
inner = window.innerHeight;

if (client < inner) {
return inner;
}
else {
return client;
}
};

  /**
* Get the page Y offset
*
* @return {integer} Page Y offset
*/
 Vivus.prototype.scrollY = function () {
return window.pageYOffset || this.docElem.scrollTop;
};

it's all white, but if you scroll at the bottom, you will see than the svg appear and start animate.

Is there any way to make the animation start let's say 100 pixel when I've scroll on view at the top of the svg ? or just when it appears ?

Thank you for your help, I'm having headache with that, any highlite would be amazing :)

Answer 1

"If you need to edit this object, it is accessible in the onReady callback"

https://github.com/maxwellito/vivus

onReady: function(myVivus) { // Then call myVivus.play(3); }

---