ngx-scrollreveal
Version:
Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.
114 lines (113 loc) • 4.12 kB
TypeScript
/**
* Configuration service for the NgsScrollReveal directives.
* You can inject this service, typically in your root component, and customize the values of its properties in
* order to provide default values for all the ngsReveal directives used in the application.
*/
export declare class NgsRevealConfig {
/**
* `options.delay` is the time before reveal animations begin.
* By default, delay will be used for all reveal animations,
* but `options.useDelay` can be used to change when delay is applied.
* However, animations triggered by `options.reset` will never use delay.
*/
delay?: number;
/**
* `options.distance` controls how far elements move when revealed.
*/
distance?: string;
/**
* `options.duration` controls how long animations take to complete.
*/
duration?: number;
/**
* `options.easing` controls how animations transition between their start and end values.
* Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
*/
easing?: string;
/**
* `options.interval` is the time between each reveal.
*/
interval?: number;
/**
* `options.opacity` specifies the opacity they have prior to being revealed.<br/>
*/
opacity?: number;
/**
* `options.origin` specifies what direction elements come from when revealed.
*/
origin?: 'bottom' | 'left' | 'top' | 'right';
/**
* `options.rotate` specifies the rotation elements have prior to being revealed.
*/
rotate?: {
x: number;
y: number;
z: number;
};
/**
* `options.scale` specifies the size of elements have prior to being revealed.
*/
scale?: number;
/**
* When non-resetting reveal animations complete, `ScrollReveal` will remove that elements event listeners,
* generated styles and metadata. In some cases (such as asynchronous sequences), you may not want this behavior.
*/
cleanup?: boolean;
/**
* `options.container` is used as the viewport, when determining element visibility.
* This is the element that ScrollReveal binds event listeners to.
*/
container?: Element | string;
/**
* `options.desktop` enables/disables animations on desktop browsers.
*/
desktop?: boolean;
/**
* `options.mobile` enables/disables animations on mobile browsers.
*/
mobile?: boolean;
/**
* `options.reset` enables/disables elements returning to their initialized position when they leave the viewport.
* When true elements reveal each time they enter the viewport instead of once.
*/
reset?: boolean;
/**
* `options.useDelay` specifies when values assigned to options.delay are used.
*
* - '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' | 'once' | 'onload';
/**
* `options.viewFactor` specifies what portion of an element must be within the viewport for it to be considered visible.
*/
viewFactor?: number;
/**
* `options.viewOffset` expands/contracts the active boundaries of the viewport when calculating element visibility.
*
* Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
*/
viewOffset?: {
top: number;
right: number;
bottom: number;
left: number;
};
/**
* `options.beforeReveal` is a function that fires when a reveal is triggered.
*/
beforeReveal?: (el: HTMLElement) => void;
/**
* `options.afterReveal` is a function that fires upon reveal completion.
*/
afterReveal?: (el: HTMLElement) => void;
/**
* `options.beforeReset` is a function that fires when a reset is triggered.
*/
beforeReset?: (el: HTMLElement) => void;
/**
* `options.afterReset` is a function that fires upon reset completion.Callback to call after an element is reset.
*/
afterReset?: (el: HTMLElement) => void;
}