FX

Sections: Default Options | Using animate.css | FX Builder

Default Options

$('#slider')
  .anythingSlider({
    // slider options
  })
  .anythingSliderFx({
    // FX definitions
    // 'class or ID'  : [ 'predefined-FX', 'distance', 'time', 'easing' ]
  },{
    // FX options
    easing     : 'swing', // Default FX easing
    timeIn     : 400,     // Default time for in FX animation
    timeOut    : 350,     // Default time for out FX animation - when using predefined FX, this number gets divided by 2
    stopRepeat : false,   // When true, the FX will not repeat when clicking on the current navigation tab.
    outFxBind  : 'slide_init',    // When outFx animations are called
    inFxBind   : 'slide_complete' // When inFx animations are called
    dataAnimate: 'data-animate'   // data attribute containing the animate.css class names to add for in and out fx
  });

• Note: Setting the stopRepeat option to true does the following:
  • FX will not repeat when clicking on the current navigation tab
  • Out FX will not activate on page load (this includes triggering animate.css animation)

AnythingSlider FX using the animate.css library

• Please refer to the animate.css demo page for a better idea of what's available.

• As of AnythingSlider version 1.7.21, the FX extension was updated to allow using the animate.css library.

• When setting up the slider, include the FX extension and the following inline data attribute. Inside the data attribute, the in animation and out animation inside separated by a comma.

  <ul id="slider">
    <!-- data-animate="IN animation, OUT animation" can be applied
         to the panel or ANY element inside the panel -->
    <li data-animate="rotateInDownLeft, rotateOutDownRight"> </li>
    <li data-animate="rotateIn, rotateOut"> </li>
    <li data-animate="flipInX, flipOutX"> </li>
    <li data-animate="rotateInUpLeft, rotateOutUpRight"> </li>
  </ul>

  Initialize the script

  $('#slider')
    .anythingSlider({
      animationTime      : 0,  // no jQuery animation - no sliding left/right
      delayBeforeAnimate : 500 // add delay before switching so you can see the css3 animation
    })
    .anythingSliderFx(
      {},    // no fx animation, it's all css baby!
      {
        dataAnimate: 'data-animate' // data attribute containing the in and out animation.css class names to use
      }
    );

AnythingSlider FX Builder

• The bookmarklet on this page allows you to run the FX builder on any of your pages that have AnythingSlider.
• The builder allows you to try out and plan the specific effects (FX) you want to apply to your slider.
• Add effects to the slider. Test individual or all listed FX live.
• When building is complete, click the code button and the builder will output the actual FX code to paste inside of the anythingSliderFX options.
• For more detailed instructions, look at this readme file

More Coming Soon...