scrollscene/dist/commonjs/ScrollObserver.d.ts

ScrollScene is an extra layer on top of ScrollMagic as well as using IntersectionObserver to achieve similar effects.

export interface IScrollObserverGsap {
    /**
     * timeline
     * @desc Insert your gsap.timeline object var
     * @type object
     * @example
     * const myTimeline = gsap.timeline()
     * gsap: { timeline: myTimeline }
     */
    timeline: any;
    /**
     * yoyo
     * @desc Do you want gsap animation to loop back and forth?
     * @type boolean
     * @default false
     * @example
     * gsap: { yoyo: true }
     */
    yoyo?: boolean;
    /**
     * speed
     * @desc The speed at which the gsap animation will play relative to it's current speed.
     * @type number
     * @default 1
     * @example
     * gsap: { speed: 2 } // = twice as fast
     */
    speed?: number;
    /**
     * speed
     * @desc The speed at which the gsap animation will reverse relative to it's current speed.
     * @type number
     * @default 4
     * @example
     * gsap: { speed: 4 } // = 4x as fast
     */
    reverseSpeed?: number;
    /**
     * delay
     * @desc The delay (in seconds) at which the gsap animation wait before reversing.
     * @type number
     * @default 2
     * @example
     * gsap: { delay: 3 } // = Wait 3 seconds
     */
    delay?: number;
}
export interface IScrollObserverToggle {
    /**
     * className
     * @desc Specify the className you wish to toggle.
     * @type string
     * @example
     * toggle: { className: 'turn-me-blue-baby' }
     */
    className: string;
    /**
     * element
     * @desc Specify the element you wish to toggle the className on.
     * @type HTMLElement | any
     * @example
     * toggle: { element: containerRef.current }
     */
    element: HTMLElement | any;
}
export interface IScrollObserverVideo {
    /**
     * element
     * @desc Specify the video element you wish to interact with.
     * @type HTMLElement | any
     * @example
     * video: { element: videoRef.current }
     */
    element: HTMLElement | any;
}
interface IScrollObserver {
    /**
     * breakpoints
     * @desc Use to set responsiveness of the ScrollObserver, mobile-first
     * @type object
     * @example
     * breakpoints: { 0: false, 768: true }
     */
    breakpoints?: object;
    /**
     * callback
     * @desc Use to set a callback when the scene is active.
     * @type object
     * @example
     * callback: { active: () => (), notActive: () => () }
     */
    callback?: object;
    /**
     * destroyImmediately
     * @desc Use to destroy the scene immediately after firing once the element is visible.
     * @type boolean
     * @example
     * destroyImmediately: true
     */
    destroyImmediately?: boolean;
    /**
     * gsap
     * @desc Use to set options for the gsap animation of the ScrollObserver.
     * @type object
     * @example
     * gsap: { timeline: myTimeline, yoyo: true, reverseSpeed: 2 }
     */
    gsap?: IScrollObserverGsap;
    /**
     * observer
     * @desc Extra options to pass the IntersectionObserver, like root, rootMargin, threshold (to override the thresholds option)
     * @type object
     * @example
     * observer: { rootMargin: '-50% 0%' }
     */
    observer?: object;
    /**
     * offset
     * @desc Change the offset. This uses rootMargin thus only works as a negative offset.
     * @type number | string
     * @defaultvalue '0% 0%'
     * @example
     * offset: 500 // this will be rootMargin: '-500px 0%'
     */
    offset?: number | string;
    /**
     * thresholds
     * @desc Set the number of thresholds you want.
     * @returns An Array of number from 0 to 1. Add 1 to your number to account for 0.
     * @type number
     * @example
     * thresholds: 1 = [0, 1]
     * thresholds: 2 = [0, 0.5, 1]
     * thresholds: 3 = [0, 0.33, 0.67, 1]
     * thresholds: 100 = [0, 0.1, 0.2, ... 0.98, 0.99, 1]
     */
    thresholds?: number;
    /**
     * toggle
     * @desc Use to set the options for the toggling of a className
     * @type object
     * @example
     * toggle: { element: containerRef.current, className: 'lets-do-this' }
     */
    toggle?: IScrollObserverToggle;
    /**
     * triggerElement
     * @desc Set the element you wish to trigger events based upon, the observed element.
     * @type HTMLElement | any
     * @example
     * triggerElement: triggerRef.current
     */
    triggerElement: HTMLElement | any;
    /**
     * useDuration
     * @desc Use the percentage of element visibility to scrub the gsap timeline.
     * @type boolean
     * @example
     * useDuration: true
     */
    useDuration?: boolean;
    /**
     * video
     * @desc Use to set the options for playing and pausing of the video.
     * @type object
     * @example
     * video: { element: videoRef.current }
     */
    video?: IScrollObserverVideo;
    /**
     * whenVisible
     * @desc Set when the scene should be active based on the percentage of the element visible
     * @type number
     * @example
     * whenVisible: '50%'
     */
    whenVisible?: string;
}
declare const ScrollObserver: (this: any, { breakpoints, callback, destroyImmediately, gsap, observer, offset, whenVisible, thresholds, toggle, triggerElement, useDuration, video, }: IScrollObserver) => void;
export { ScrollObserver };