Scroll Reveal Example

How to Use Scroll Reveal(Customize options according to requirements)

Add .reveal class to any tag for Archive animation like this

// The Below Function is example of how to initlize reveal

if (Modernizr.csstransforms3d){
window.sr = ScrollReveal();
sr.reveal('.reveal', {
duration: 800,
delay: 400,
reset: true,
easing: 'linear',
scale: 1
});
}

Scroll Reveal Settings options

// 'bottom', 'left', 'top', 'right'

origin: 'bottom',

// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.

distance: '20px',

// Time in milliseconds.

duration: 500, delay: 0,

// Starting angles in degrees, will transition from these values to 0 in all axes.

rotate: { x: 0, y: 0, z: 0 },

// Starting opacity value, before transitioning to the computed opacity.

opacity: 0,

// Starting scale value, will transition from this value to 1

scale: 0.9,

// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.

easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',

// is the default reveal container. You can pass either:
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'

easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',

// true/false to control reveal animations on mobile.

mobile: true,

// true: reveals occur every time elements become visible
// false: reveals occur once as elements become visible

reset: false,

// 'always' — delay for all reveal animations
// 'once' — delay only the first time reveals occur
// 'onload' - delay only for animations triggered by first load

useDelay: 'always',

// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.

viewFactor: 0.2,

// Pixel values that alter the container boundaries.
// e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
// --
// Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png

viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },

// Callbacks that fire for each triggered element reveal, and reset.

beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},

// Callbacks that fire for each completed element reveal, and reset.

afterReveal: function (domEl) {},
afterReset: function (domEl) {}