Skrollr starts the animation once and then stops

Question

How to start an animation in Skrollr once and then kill?

I tried:

• Method beforerenderbut which kills all animations
• Finding ways to install individual instances of Skrollr, but this is singleton
• Delete or rename an object attributes
• null ifying object className
• CSS class switch

Each time, it looks like the values ​​are cached inside Skrollr and run regardless of my efforts. What am I missing here?

Answer 1

I want to improve this question:

https://github.com/Prinzhorn/skrollr/wiki/Tips

On the Tips tab, on the Tips tab, there is a snippet that will be useful:

skrollr.init({
    beforerender: function(data) {
        return data.curTop > data.lastTop;
    }
});

, , , , , , , "" , CSS--fill-mode: ,

Answer 2

, , -. node . , :

// Before this, poll window.onscroll to wait for the skrollable-after
// class to be applied.
if (!this.flags.learnmore && Toolbox.hasClass(this.dom.learnmoreslider, 'skrollable-after')) {
    // Sort of a misleading name, sorry, not an exact clone
    var clone = document.createElement("span");
    clone.innerHTML = this.dom.learnmoreslider.innerHTML;

    // This was the end condition of the animation
    // (it slid text horizontally) so it has to look the same.
    clone.style.marginLeft = "250px";

    var parent = this.dom.learnmoreslider.parentNode;
    parent.appendChild(clone);

    // This must be removed after in order to maintain the parent reference.
    parent.removeChild(this.dom.learnmoreslider);

    // Raise a flag or remove the listener or something, you're done
    this.flags.learnmore = true;
    } 
}

, . .

Answer 3

Something like this should work:

skroller = skrollr.init({
  render: function(data) {
    scroll = data.curTop;

    if ((scroll >= 200) && (!element.hasClass('active'))) { 
      element.addClass('active').removeAttr('data-start data-end');
      skroller.refresh();
    }
  }
});