gsap-dattebayo/dist/index.d.ts

The ultimate GSAP-powered scroll animation library - Simple as AOS, powerful as GSAP. Modern animations for 2025-2026 web trends.

import ScrollTrigger from 'gsap/ScrollTrigger';

/**
 * Default configuration for GSAP Dattebayo animations
 * Optimized for modern web trends 2025-2026
 */
interface DattebayoDefaults {
    duration: number;
    ease: string;
    distance: number;
    stagger: number;
    delay: number;
    start: string;
    end: string;
    once: boolean;
    markers: boolean;
    triggerMode: "load" | "scroll" | "hover" | "click";
    hoverAnimation?: string;
    hoverLeaveAnimation?: string;
    option?: "reverse" | "scrub" | "replay";
}
declare const DEFAULT_CONFIG: DattebayoDefaults;
/**
 * Merge user config with defaults
 */
declare function mergeConfig(userConfig?: Partial<DattebayoDefaults>): DattebayoDefaults;
/**
 * Common GSAP easing presets for 2025 trends
 */
declare const EASINGS: {
    readonly smooth: "power2.out";
    readonly smoothIn: "power2.in";
    readonly smoothInOut: "power2.inOut";
    readonly elastic: "elastic.out(1, 0.3)";
    readonly elasticIn: "elastic.in(1, 0.3)";
    readonly back: "back.out(1.7)";
    readonly backIn: "back.in(1.7)";
    readonly expo: "expo.out";
    readonly expoIn: "expo.in";
    readonly circ: "circ.out";
    readonly circIn: "circ.in";
    readonly none: "none";
};
type EasingPreset = keyof typeof EASINGS;

/**
 * GSAP configuration and plugin registration
 * Auto-registers all free GSAP plugins (2025+)
 */

/**
 * Initialize GSAP with all free plugins
 * Safe to call multiple times
 */
declare function initGSAP(): void;
/**
 * Refresh all ScrollTriggers
 * Call after DOM changes
 */
declare function refreshScrollTriggers(): void;
/**
 * Kill all animations and ScrollTriggers
 * Useful for cleanup
 */
declare function killAll(): void;

/**
 * Auto-initialization system
 * Automatically detects and animates elements with data attributes
 */

/**
 * Initialize auto-detection and animation
 */
declare function autoInit(config?: Partial<DattebayoDefaults>): void;
/**
 * Manually refresh all animations
 */
declare function refresh(): void;
/**
 * Destroy auto-init
 */
declare function destroy(): void;

/**
 * Fade animations - Core reveal effects
 * 100% GSAP-powered, GPU-accelerated
 */

interface FadeOptions extends Partial<DattebayoDefaults> {
    autoAlpha?: boolean;
}
/**
 * Fade in - Simple opacity reveal
 */
declare function fadeIn(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;
/**
 * Fade out
 */
declare function fadeOut(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;
/**
 * Fade up - Fade in with upward movement (most popular scroll reveal)
 */
declare function fadeUp(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;
/**
 * Fade down
 */
declare function fadeDown(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;
/**
 * Fade left
 */
declare function fadeLeft(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;
/**
 * Fade right
 */
declare function fadeRight(target: string | HTMLElement | HTMLElement[], options?: FadeOptions): gsap.core.Tween;

/**
 * Slide animations - Entrance/exit with movement
 * 100% GSAP transforms for GPU acceleration
 */

interface SlideOptions extends Partial<DattebayoDefaults> {
}
/**
 * Slide in from bottom (upward)
 */
declare function slideInUp(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;
/**
 * Slide in from top (downward)
 */
declare function slideInDown(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;
/**
 * Slide in from left (rightward)
 */
declare function slideInLeft(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;
/**
 * Slide in from right (leftward)
 */
declare function slideInRight(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;
/**
 * Slide out up
 */
declare function slideOutUp(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;
/**
 * Slide out down
 */
declare function slideOutDown(target: string | HTMLElement | HTMLElement[], options?: SlideOptions): gsap.core.Tween;

/**
 * Zoom/Scale animations - Modern reveal effects
 * GPU-accelerated scale transforms
 */

interface ZoomOptions extends Partial<DattebayoDefaults> {
    scale?: number;
    transformOrigin?: string;
}
/**
 * Zoom in - Scale from small to normal
 */
declare function zoomIn(target: string | HTMLElement | HTMLElement[], options?: ZoomOptions): gsap.core.Tween;
/**
 * Zoom out - Scale from large to normal
 */
declare function zoomOut(target: string | HTMLElement | HTMLElement[], options?: ZoomOptions): gsap.core.Tween;
/**
 * Zoom in with upward movement (trendy combo)
 */
declare function zoomInUp(target: string | HTMLElement | HTMLElement[], options?: ZoomOptions): gsap.core.Tween;
/**
 * Zoom in with downward movement
 */
declare function zoomInDown(target: string | HTMLElement | HTMLElement[], options?: ZoomOptions): gsap.core.Tween;
/**
 * Elastic zoom - Bouncy scale effect (2025 trend)
 */
declare function elasticZoom(target: string | HTMLElement | HTMLElement[], options?: ZoomOptions): gsap.core.Tween;

/**
 * Rotation animations - 3D transform effects
 * GPU-accelerated rotations with perspective
 */

interface RotateOptions extends Partial<DattebayoDefaults> {
    rotation?: number;
    transformOrigin?: string;
    perspective?: number;
}
/**
 * Rotate in - 2D rotation reveal
 */
declare function rotateIn(target: string | HTMLElement | HTMLElement[], options?: RotateOptions): gsap.core.Tween;
/**
 * Rotate out
 */
declare function rotateOut(target: string | HTMLElement | HTMLElement[], options?: RotateOptions): gsap.core.Tween;
/**
 * Flip in horizontal (3D rotation on Y axis)
 */
declare function flipInX(target: string | HTMLElement | HTMLElement[], options?: RotateOptions): gsap.core.Tween;
/**
 * Flip in vertical (3D rotation on X axis)
 */
declare function flipInY(target: string | HTMLElement | HTMLElement[], options?: RotateOptions): gsap.core.Tween;
/**
 * Spin in - Continuous rotation entrance
 */
declare function spinIn(target: string | HTMLElement | HTMLElement[], options?: RotateOptions): gsap.core.Tween;

/**
 * Blur animations - Modern 2025 trend effect
 * Blur-to-focus reveal using CSS filters (GPU-accelerated)
 */

interface BlurOptions extends Partial<DattebayoDefaults> {
    blurAmount?: number;
    scale?: number;
}
/**
 * Blur to focus - From blurry to sharp (2025 trend)
 */
declare function blurToFocus(target: string | HTMLElement | HTMLElement[], options?: BlurOptions): gsap.core.Tween;
/**
 * Focus to blur - Reverse effect
 */
declare function focusToBlur(target: string | HTMLElement | HTMLElement[], options?: BlurOptions): gsap.core.Tween;
/**
 * Blur in up - Blur with upward movement
 */
declare function blurInUp(target: string | HTMLElement | HTMLElement[], options?: BlurOptions): gsap.core.Tween;
/**
 * Blur zoom - Blur with scale effect (dramatic entrance)
 */
declare function blurZoom(target: string | HTMLElement | HTMLElement[], options?: BlurOptions): gsap.core.Tween;

/**
 * Character-by-character reveal animations
 * Uses GSAP SplitText (free since 2025)
 */

interface CharRevealOptions extends Partial<DattebayoDefaults> {
    stagger?: number;
    from?: 'start' | 'center' | 'end' | 'random';
    split?: 'chars' | 'words' | 'lines';
}
/**
 * Character stagger reveal - Classic typewriter-style
 */
declare function charReveal(target: string | HTMLElement | HTMLElement[], options?: CharRevealOptions): gsap.core.Timeline;
/**
 * Character fade up - Simple fade with upward movement
 */
declare function charFadeUp(target: string | HTMLElement | HTMLElement[], options?: CharRevealOptions): gsap.core.Timeline;
/**
 * Character wave - Wave-like stagger effect
 */
declare function charWave(target: string | HTMLElement | HTMLElement[], options?: CharRevealOptions): gsap.core.Timeline;
/**
 * Character elastic - Bouncy scale reveal (2025 trend)
 */
declare function charElastic(target: string | HTMLElement | HTMLElement[], options?: CharRevealOptions): gsap.core.Timeline;
/**
 * Character blur in - Blur to focus per character (modern)
 */
declare function charBlur(target: string | HTMLElement | HTMLElement[], options?: CharRevealOptions): gsap.core.Timeline;

/**
 * Word-by-word reveal animations
 * Uses GSAP SplitText for word-level animations
 */

interface WordRevealOptions extends Partial<DattebayoDefaults> {
    stagger?: number;
    from?: 'start' | 'center' | 'end' | 'random';
}
/**
 * Word fade up - Words reveal with upward movement
 */
declare function wordReveal(target: string | HTMLElement | HTMLElement[], options?: WordRevealOptions): gsap.core.Timeline;
/**
 * Word scale in - Words pop in with scale
 */
declare function wordScaleIn(target: string | HTMLElement | HTMLElement[], options?: WordRevealOptions): gsap.core.Timeline;
/**
 * Word rotate in - 3D rotation reveal per word
 */
declare function wordRotateIn(target: string | HTMLElement | HTMLElement[], options?: WordRevealOptions): gsap.core.Timeline;
/**
 * Word slide alternate - Words slide from alternating directions
 */
declare function wordSlideAlternate(target: string | HTMLElement | HTMLElement[], options?: WordRevealOptions): gsap.core.Timeline;

/**
 * Line-by-line reveal animations
 * Uses GSAP SplitText for line-level animations
 */

interface LineRevealOptions extends Partial<DattebayoDefaults> {
    stagger?: number;
    clipPath?: boolean;
}
/**
 * Line reveal - Classic line-by-line fade up
 */
declare function lineReveal(target: string | HTMLElement | HTMLElement[], options?: LineRevealOptions): gsap.core.Timeline;
/**
 * Line clip reveal - Mask-based reveal (modern effect)
 */
declare function lineClipReveal(target: string | HTMLElement | HTMLElement[], options?: LineRevealOptions): gsap.core.Timeline;
/**
 * Line slide alternate - Lines slide from alternating sides
 */
declare function lineSlideAlternate(target: string | HTMLElement | HTMLElement[], options?: LineRevealOptions): gsap.core.Timeline;
/**
 * Line scale reveal - Lines scale in from center
 */
declare function lineScaleReveal(target: string | HTMLElement | HTMLElement[], options?: LineRevealOptions): gsap.core.Timeline;

/**
 * Scramble/Glitch text animations
 * Modern cyberpunk-style text reveals
 */

interface ScrambleOptions extends Partial<DattebayoDefaults> {
    chars?: string;
    revealDelay?: number;
    scrambleSpeed?: number;
}
/**
 * Scramble text reveal - GSAP ScrambleText plugin
 */
declare function scrambleReveal(target: string | HTMLElement | HTMLElement[], options?: ScrambleOptions): gsap.core.Timeline;
/**
 * Glitch reveal - Digital glitch effect
 */
declare function glitchReveal(target: string | HTMLElement | HTMLElement[], options?: ScrambleOptions): gsap.core.Timeline;
/**
 * Matrix reveal - Matrix-style falling characters
 */
declare function matrixReveal(target: string | HTMLElement | HTMLElement[], options?: ScrambleOptions): gsap.core.Timeline;

/**
 * Parallax scroll effects
 * Uses GSAP ScrollTrigger for smooth parallax animations
 */

interface ParallaxOptions extends Partial<DattebayoDefaults> {
    speed?: number;
    direction?: 'vertical' | 'horizontal';
    scrub?: boolean | number;
    smooth?: boolean;
}
/**
 * Basic parallax - Elements move at different speeds while scrolling
 */
declare function parallax(target: string | HTMLElement | HTMLElement[], options?: ParallaxOptions): ScrollTrigger[];
/**
 * Parallax speed - Simple speed-based parallax (like Locomotive Scroll)
 */
declare function parallaxSpeed(target: string | HTMLElement | HTMLElement[], options?: ParallaxOptions): ScrollTrigger[];
/**
 * Parallax layers - Multi-layer parallax effect
 */
declare function parallaxLayers(container: string | HTMLElement, options?: ParallaxOptions): ScrollTrigger[];
/**
 * Parallax 3D - Perspective-based parallax
 */
declare function parallax3D(target: string | HTMLElement | HTMLElement[], options?: ParallaxOptions): ScrollTrigger[];
/**
 * Parallax rotate - Rotation-based parallax
 */
declare function parallaxRotate(target: string | HTMLElement | HTMLElement[], options?: ParallaxOptions): ScrollTrigger[];

/**
 * Scroll reveal animations
 * Elements animate when they enter the viewport
 */

interface ScrollRevealOptions extends Partial<DattebayoDefaults> {
    animation?: 'fade' | 'fadeUp' | 'fadeDown' | 'fadeLeft' | 'fadeRight' | 'zoom' | 'slide';
    trigger?: string | HTMLElement;
    scrub?: boolean | number;
    pin?: boolean;
    toggleActions?: string;
}
/**
 * Scroll reveal - Animate elements as they enter viewport
 */
declare function scrollReveal(target: string | HTMLElement | HTMLElement[], options?: ScrollRevealOptions): ScrollTrigger[];
/**
 * Batch scroll reveal - Optimized for many elements
 */
declare function batchScrollReveal(target: string | HTMLElement | HTMLElement[], options?: ScrollRevealOptions): ScrollTrigger;
/**
 * Pin section - Pin element while scrolling
 */
declare function pinSection(target: string | HTMLElement, options?: ScrollRevealOptions): ScrollTrigger;
/**
 * Scrub animation - Animation tied to scroll position
 */
declare function scrubAnimation(target: string | HTMLElement | HTMLElement[], animationVars: gsap.TweenVars, options?: ScrollRevealOptions): gsap.core.Tween[];
/**
 * Horizontal scroll - Horizontal scrolling section
 */
declare function horizontalScroll(container: string | HTMLElement, options?: ScrollRevealOptions): ScrollTrigger;

/**
 * Scroll progress indicators
 * Visual feedback for scroll position
 */

interface ProgressOptions extends Partial<DattebayoDefaults> {
    direction?: 'horizontal' | 'vertical';
    thickness?: number;
    color?: string;
    position?: 'top' | 'bottom' | 'left' | 'right';
}
/**
 * Scroll progress bar - Page-level progress indicator
 */
declare function scrollProgress(options?: ProgressOptions): HTMLElement;
/**
 * Section progress - Progress for specific section
 */
declare function sectionProgress(target: string | HTMLElement, options?: ProgressOptions): HTMLElement;
/**
 * Circular progress - Circular scroll indicator
 */
declare function circularProgress(options?: ProgressOptions & {
    size?: number;
}): HTMLElement;
/**
 * Scroll percentage - Update element with scroll percentage
 */
declare function scrollPercentage(target: string | HTMLElement, options?: ProgressOptions): ScrollTrigger;

/**
 * Main initialization function
 */
interface DattebayoConfig {
    autoDetect?: boolean;
    defaults?: Partial<DattebayoDefaults>;
    debug?: boolean;
}
/**
 * Initialize GSAP Dattebayo
 */
declare function init(config?: DattebayoConfig): void;
/**
 * Utility functions
 */
declare const utils: {
    refresh: typeof refreshScrollTriggers;
    killAll: typeof killAll;
    initGSAP: typeof initGSAP;
};
/**
 * Default export
 */
declare const _default: {
    init: typeof init;
    utils: {
        refresh: typeof refreshScrollTriggers;
        killAll: typeof killAll;
        initGSAP: typeof initGSAP;
    };
    autoInit: typeof autoInit;
    refresh: typeof refreshScrollTriggers;
    destroy: typeof killAll;
};

export { DEFAULT_CONFIG, EASINGS, autoInit, batchScrollReveal, blurInUp, blurToFocus, blurZoom, charBlur, charElastic, charFadeUp, charReveal, charWave, circularProgress, _default as default, destroy, elasticZoom, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, flipInX, flipInY, focusToBlur, glitchReveal, horizontalScroll, init, lineClipReveal, lineReveal, lineScaleReveal, lineSlideAlternate, matrixReveal, mergeConfig, parallax, parallax3D, parallaxLayers, parallaxRotate, parallaxSpeed, pinSection, refresh, rotateIn, rotateOut, scrambleReveal, scrollPercentage, scrollProgress, scrollReveal, scrubAnimation, sectionProgress, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutUp, spinIn, utils, wordReveal, wordRotateIn, wordScaleIn, wordSlideAlternate, zoomIn, zoomInDown, zoomInUp, zoomOut };
export type { BlurOptions, CharRevealOptions, DattebayoConfig, DattebayoDefaults, EasingPreset, FadeOptions, LineRevealOptions, ParallaxOptions, ProgressOptions, RotateOptions, ScrambleOptions, ScrollRevealOptions, SlideOptions, WordRevealOptions, ZoomOptions };