Skrollr run animation once only then stop

Question

How can I run an animation in Skrollr once, and then kill it?

I've tried:

• The beforerender method but that kills all animations
• Looking for ways to set individual Skrollr instances, but it's a singleton
• Removing or renaming the object's attributes
• nullifying the object's className
• Toggling a CSS class

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

Answer 1

I want to improve this question:

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

In the wiki under Tips tab, there is a snippet that would be useful:

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

In fact, with this code, it will animate only if you scroll down, so it will result that the animation will be played once, or in other words, it wouldn't "turn back" when you scroll up, acting like the CSS animation-fill-mode: forwards;

Answer 2

Well, I finally found a semi-solution. I've removed the node entirely and re-inserted a new one. Here's my code so you can get the idea:

// 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;
    } 
}

A tad clunky but does the trick. I'm definitely still interested in the correct way to kill an animation.

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