☰
Documentation

Base Settings

What can I configure?

You can configure an instance of reveal using the huge amount of customization options it has to offer, as follows:

$('.reveal').reveal({
  animation: 'opacity 0', // Default animation

  animate: "TweenLite", // Animator Class

  // Default delays
  startDelay: 600,
  endDelay: 0,

  edge: [100, 100], // Screen edge offset

  // Responsive screen sizes
  screen: {
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1560
  },

  loop: false, // Loop animations
  repeat: false, // Repeat animations
  visibility: false, // Affect CSS visibility
  preload: true, // Refresh size and position on image load

  callback: false, // Animation callback

  // Perspective settings
  perspective: 800,
  perspectiveOrigin: "50% 50%",

  // Scrolling orientation
  orientation: 'vertical',

  // Advanced container setup
  container: $('body'),
  scroller: $(window)
});

The initialization script above shows the default values for all of reveal’s parameters.

Let’s see what each option is and what happens when you change it.

Option Description
animation Defines the default animation parameters.
animate Specifies GSAP animator class, allowing you to easily swap to TweenMax.
startDelay Starts the reveal animation after specified delay.
endDelay Starts the hide animation after specified delay.
edge Specifies top and bottom edge offsets to start showing elements only when they’re partly in view.
preload Specifies whether to preload images. Once loaded, image sizes will be refreshed.
visibility Affect CSS visibility when changing element visibility.
callback Specifies a callback for each animation.

Example: function(event, element, state){}
perspective Specifies perspective for the parent reveal element.
perspectiveOrigin Specifies perspective origin for the parent reveal element.
orientation Specifies a vertical or horizontal scrolling orientation.
container Container element to use for scroll position references.
scroller Scroller element to use for scroll position references.
screen Specifies the responsive breakpoints for responsive animations.
Previous
Add reveal to anything
Read Next
Introduction