scrollscene/dist/esm/ScrollScene.d.ts

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

import { IScrollObserverToggle, IScrollObserverGsap } from './ScrollObserver';
interface IScrollSceneToggle extends IScrollObserverToggle {
    /**
     * reverse
     * @desc Specify the className should be removed after the duration of scene is met. Only applies if scene has duration.
     * @type boolean
     * @default false
     * @example
     * toggle: { reverse: true }
     */
    reverse?: boolean;
}
interface IScrollScene {
    /**
     * breakpoints
     * @desc Use to set responsiveness of the new ScrollMagic.Scene, mobile-first
     * @type object
     * @example
     * breakpoints: { 0: false, 768: true }
     */
    breakpoints?: object;
    /**
     * controller
     * @desc Extra options to pass the new ScrollMagic.Controller, like vertical, etc.
     * @type object
     * @example
     * controller: { vertical: false }
     */
    controller?: object;
    /**
     * duration
     * @desc Use to set responsiveness of the new ScrollMagic.Scene, mobile-first (if setting breakpoints)
     * Must be string for percentage, and number for pixel.
     * @type object
     * @example
     * duration: '100%' = 100vh
     * duration: 100 = 100px
     * duration: { 0: '50%', 768: '100% } // = ScrollScene lasts 50vh on mobile, 100% after
     */
    duration?: string | number | object;
    /**
     * 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;
    /**
     * triggerHook
     * @desc Set the offset of the ScrollMagic scene.
     * @type  number | string
     * @defaultvalue 0
     * @example
     * offset: 100
     * offset: '10%'
     */
    offset?: number | string;
    /**
     * scene
     * @desc Extra options to pass the new ScrollMagic.Scene, like logLevel, etc.
     * @type object
     * @example
     * scene: { logLevel: 2 }
     */
    scene?: object;
    /**
     * 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?: IScrollSceneToggle;
    /**
     * 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;
    /**
     * triggerHook
     * @desc Set the triggerHook of the ScrollMagic scene.
     * @type  number
     * @defaultvalue 'onEnter'
     * @example
     * triggerHook: 0.5
     */
    triggerHook?: number | string;
    /**
     * useGlobalController
     * @desc Chose whether or not to use the globalController provided for you, or a fresh new ScrollMagic.Controller instance.
     * @type boolean
     * @defaultValue true
     * @example
     * useGlobalController: false
     */
    useGlobalController?: boolean;
}
declare const ScrollScene: (this: any, { breakpoints, controller, duration, gsap, offset, scene, toggle, triggerElement, triggerHook, useGlobalController, }: IScrollScene) => void;
export { ScrollScene };