Callbacks can be used alongside other Options.

  • afterPosition

    A function to call after the position changed. The first argument is the current position within the group.

    afterPosition: function(position) {
      console.log("You've reached position " + position);
  • afterHide

    A function to call after Strip is fully hidden.

    afterHide: function() {
      console.log('Strip is no longer visible');
  • onResize

    This callback allows you to respond to Strip as it's resizing and make adjustments to your page. You could for example slide your page along or adjust margins. The parameters of onResize give you everything needed to make these adjustments.

    onResize: function(fxProperty, fxValue, side) {
      console.log(fxProperty, fxValue, side);
      // logs: 'width', 0, 'right' when starting the animation
      // and adjusts fxValue for each step in the animation

    fxProperty is the property currently animated, which can be 'width' or 'height'. fxValue is the value of that property at the current step in the animation. side is the current side Strip is positioned on, which can be 'top', 'bottom', 'left' or 'right'.

    Note: Strip provides this callback instead of baking in effects that would enforce specific markup onto your page. You decide what works with your markup, onResize gives you the tools to make it work.
  • onShow

    A function to call when Strip comes into view.

    onShow: function() {
      console.log('Strip is visible');