Skip to content

Configuration (v2.x)

Jump to bottom
Julian Lloyd edited this page Mar 4, 2020 · 4 revisions

Defaults

All animations use the default configuration, unless otherwise overwritten by keywords inside a data-sr attribute. Let’s take a look at the entire scrollReveal default config object.

defaults: {

  enter:    'bottom',
  move:     '8px',
  over:     '0.6s',
  wait:     '0s',
  easing:   'ease',

  scale:    { direction: 'up', power: '5%' },
  rotate:   { x: 0, y: 0, z: 0 },

  opacity:  0,
  mobile:   false,
  reset:    false,

  //        Expects a reference to a DOM node (the <html> node by default)
  //        which is used as the context when checking element visibility.
  viewport: window.document.documentElement,

  //        'always' — delay every time an animation resets
  //        'onload' - delay only for animations triggered by first load
  //        'once'   — delay only the first time an animation reveals
  delay:    'once',

  //        vFactor changes when an element is considered in the viewport.
  //        The default value of 0.60 means 60% of an element must be
  //        visible for its reveal animation to trigger.
  vFactor:  0.60,

  complete: function( el ){} // Note: reset animations do not complete.
}

Using Your Own

Simple, just pass your own config object to the scrollReveal constructor. Whatever you supply will override scrollReveal’s defaults.

<!DOCTYPE html>
<html>
  <body>  

    <!-- All your stuff up here... -->

    <script src='/js/scrollReveal.min.js'></script>
    <script>

      var config = {
        easing: 'hustle',
        reset:  true,
        delay:  'onload',
        vFactor: 0.90
      }

      window.sr = new scrollReveal( config );

    </script>
  </body>
</html>

Taking a Closer Look

Opacity

  • config.opacity expects Float
  • Sets the starting opacity of all reveal animations.
            // opacity: 0   // Default value.
var config = { opacity: 1 } // No fade effect.

Mobile

  • config.mobile expects Boolean
  • true   — Animations trigger on mobile devices.
  • false — No animation on mobile.
var config = { mobile: false }

Note: Mobile scroll events don’t always play nice. scrollReveal works on mobile, but animations may pause during scrolling. This appears to have been addressed in iOS 8.

Reset

  • config.reset expects Boolean
  • true   — Animations replay each time they enter the viewport.
  • false — Animations occur only once.
var config = { reset: false }

Viewport

  • config.viewport expects Node 
var config = { viewport: document.getElementById('my-container') }

Delay

  • config.delay expects String
    • always — delay every time an animation resets.
    • once — delay only the first time an animation reveals.
    • onload - delay only for animations triggered by self.init().
var config = { delay: 'once' }

vFactor

  • config.vFactor expects Float
    • vFactor changes when an element is considered in the viewport.
var config = { vFactor: 0.60 }
              // requires 60% of an element be 
              // visible to trigger animation.

Complete

  • config.complete expects Function
    • A callback function that fires when an animation completes.

Note: Animations that use reset do not complete.

var config = { 
  complete: function( el ) {
    el.setAttribute('foo');
  }
}

Recommended Next: Tips →

📚 Docs

v3.x (2016)

v2.x (2015)

Clone this wiki locally