☰
Documentation

Base Settings

What can I configure?

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

$('.imagine').imagine({
  animation: "y", // Default animation
  animate: 'TweenLite', // GSAP animation utility

  optimize: true, // Optimize animation
  initialAnimationDuration: 1, // Animation duration on load

  orientation: 'vertical', // Scroll orientation
  factor: 0.5, // Scroll progress multiplier

  // Add perspective to elements
  perspective: 800,
  perspectiveOrigin: "50% 50%",

  // Preloading features
  preload: true,
  preloader: '<div class="imagine-loader"><div class="imagine-loader-inner"></div></div>',

  normalizeTop: true, // Normalize progress when above the initial screen center
  overflow: false, // Control animation overflow

  size: 'auto', // Set element size
  anchor: 'center', // Background anchor position

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

  // Implicit element selectors
  selector: {
    layer: '.imagine-layer',
    background: '.imagine-background'
  }
});

The initialization script above shows the default values for all of imagine’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.
optimize Optimize animations to make sure there are no performance issues
initialAnimationDuration Animation duration for initial load, to set proper element state smoothly
preload Specifies whether to preload images and display a preloading spinner until it’s loaded
preloader HTML for the preloading spinner.
perspective Specifies perspective for the parent imagine element.
perspectiveOrigin Specifies perspective origin for the parent imagine element.
normalizeTop Normalize progress when above the zero scroll screen center, to make sure they behave as if they were in the middle of the screen.
overflow Allow overflowing and underflowing of background images during scroll.
size Sets element size for various situations.

Values: auto, fullscreen, screenWidth, screenHeight
anchor Sets the background anchor position. The center anchor will always keep the image centered.

Values: "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"
screen Specifies the responsive breakpoints for responsive animations.
Previous
Add parallax effects to anything
Read Next
Backgrounds