gsap-dattebayo
Version:
The ultimate GSAP-powered scroll animation library - Simple as AOS, powerful as GSAP. Modern animations for 2025-2026 web trends.
466 lines (458 loc) • 11.9 kB
JavaScript
/*!
* GSAP Dattebayo v0.1.0-alpha.1
* The ultimate GSAP-powered scroll animation library
* https://github.com/serdjan/gsap-dattebayo
*
* Copyright 2025 GSAP Dattebayo
* Released under the MIT License
*/
import gsap from 'gsap';
import 'gsap/ScrollTrigger';
import 'gsap/SplitText';
/**
* Helper utilities for GSAP Dattebayo
*/
/**
* Convert selector or element to array of HTMLElements
*/
function toArray(target) {
if (typeof target === 'string') {
return Array.from(document.querySelectorAll(target));
}
if (target instanceof HTMLElement) {
return [target];
}
if (target instanceof NodeList) {
return Array.from(target);
}
if (Array.isArray(target)) {
return target;
}
return [];
}
/**
* Fade animations - Core reveal effects
* 100% GSAP-powered, GPU-accelerated
*/
/**
* Fade in - Simple opacity reveal
*/
function fadeIn(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, autoAlpha = true } = options;
return gsap.to(toArray(target), {
opacity: 1,
...(autoAlpha && { autoAlpha: 1 }),
duration,
ease,
delay,
force3D: true
});
}
/**
* Fade out
*/
function fadeOut(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, autoAlpha = true } = options;
return gsap.to(toArray(target), {
opacity: 0,
...(autoAlpha && { autoAlpha: 0 }),
duration,
ease,
delay,
force3D: true
});
}
/**
* Fade up - Fade in with upward movement (most popular scroll reveal)
*/
function fadeUp(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 50, autoAlpha = true } = options;
return gsap.from(toArray(target), {
opacity: 0,
y: distance,
...(autoAlpha && { autoAlpha: 0 }),
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Fade down
*/
function fadeDown(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 50, autoAlpha = true } = options;
return gsap.from(toArray(target), {
opacity: 0,
y: -distance,
...(autoAlpha && { autoAlpha: 0 }),
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Fade left
*/
function fadeLeft(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 50, autoAlpha = true } = options;
return gsap.from(toArray(target), {
opacity: 0,
x: distance,
...(autoAlpha && { autoAlpha: 0 }),
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Fade right
*/
function fadeRight(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 50, autoAlpha = true } = options;
return gsap.from(toArray(target), {
opacity: 0,
x: -distance,
...(autoAlpha && { autoAlpha: 0 }),
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Slide animations - Entrance/exit with movement
* 100% GSAP transforms for GPU acceleration
*/
/**
* Slide in from bottom (upward)
*/
function slideInUp(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 100 } = options;
return gsap.from(toArray(target), {
y: distance,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Slide in from top (downward)
*/
function slideInDown(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 100 } = options;
return gsap.from(toArray(target), {
y: -distance,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Slide in from left (rightward)
*/
function slideInLeft(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 100 } = options;
return gsap.from(toArray(target), {
x: -distance,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Slide in from right (leftward)
*/
function slideInRight(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, distance = 100 } = options;
return gsap.from(toArray(target), {
x: distance,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Slide out up
*/
function slideOutUp(target, options = {}) {
const { duration = 1, ease = 'power2.in', delay = 0, distance = 100 } = options;
return gsap.to(toArray(target), {
y: -distance,
autoAlpha: 0,
duration,
ease,
delay,
force3D: true
});
}
/**
* Slide out down
*/
function slideOutDown(target, options = {}) {
const { duration = 1, ease = 'power2.in', delay = 0, distance = 100 } = options;
return gsap.to(toArray(target), {
y: distance,
autoAlpha: 0,
duration,
ease,
delay,
force3D: true
});
}
/**
* Zoom/Scale animations - Modern reveal effects
* GPU-accelerated scale transforms
*/
/**
* Zoom in - Scale from small to normal
*/
function zoomIn(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, scale = 0, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
scale,
opacity: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Zoom out - Scale from large to normal
*/
function zoomOut(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, scale = 1.5, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
scale,
opacity: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Zoom in with upward movement (trendy combo)
*/
function zoomInUp(target, options = {}) {
const { duration = 1, ease = 'back.out(1.7)', delay = 0, scale = 0, distance = 50, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
scale,
y: distance,
opacity: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Zoom in with downward movement
*/
function zoomInDown(target, options = {}) {
const { duration = 1, ease = 'back.out(1.7)', delay = 0, scale = 0, distance = 50, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
scale,
y: -distance,
opacity: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Elastic zoom - Bouncy scale effect (2025 trend)
*/
function elasticZoom(target, options = {}) {
const { duration = 1.5, ease = 'elastic.out(1, 0.3)', delay = 0, scale = 0, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
scale,
opacity: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Rotation animations - 3D transform effects
* GPU-accelerated rotations with perspective
*/
/**
* Rotate in - 2D rotation reveal
*/
function rotateIn(target, options = {}) {
const { duration = 1, ease = 'back.out(1.7)', delay = 0, rotation = 180, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
rotation,
opacity: 0,
scale: 0.5,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Rotate out
*/
function rotateOut(target, options = {}) {
const { duration = 1, ease = 'power2.in', delay = 0, rotation = 180, transformOrigin = 'center center' } = options;
return gsap.to(toArray(target), {
rotation,
opacity: 0,
scale: 0.5,
transformOrigin,
duration,
ease,
delay,
force3D: true
});
}
/**
* Flip in horizontal (3D rotation on Y axis)
*/
function flipInX(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, transformOrigin = 'center center', perspective = 1000 } = options;
return gsap.from(toArray(target), {
rotationY: -90,
opacity: 0,
transformOrigin,
transformPerspective: perspective,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Flip in vertical (3D rotation on X axis)
*/
function flipInY(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, transformOrigin = 'center center', perspective = 1000 } = options;
return gsap.from(toArray(target), {
rotationX: -90,
opacity: 0,
transformOrigin,
transformPerspective: perspective,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Spin in - Continuous rotation entrance
*/
function spinIn(target, options = {}) {
const { duration = 1, ease = 'power2.out', delay = 0, rotation = 720, transformOrigin = 'center center' } = options;
return gsap.from(toArray(target), {
rotation,
opacity: 0,
scale: 0,
transformOrigin,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Blur animations - Modern 2025 trend effect
* Blur-to-focus reveal using CSS filters (GPU-accelerated)
*/
/**
* Blur to focus - From blurry to sharp (2025 trend)
*/
function blurToFocus(target, options = {}) {
const { duration = 1.2, ease = 'power2.out', delay = 0, blurAmount = 20, scale = 1.1 } = options;
return gsap.from(toArray(target), {
filter: `blur(${blurAmount}px)`,
opacity: 0,
scale,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Focus to blur - Reverse effect
*/
function focusToBlur(target, options = {}) {
const { duration = 1.2, ease = 'power2.in', delay = 0, blurAmount = 20, scale = 1.1 } = options;
return gsap.to(toArray(target), {
filter: `blur(${blurAmount}px)`,
opacity: 0,
scale,
duration,
ease,
delay,
force3D: true
});
}
/**
* Blur in up - Blur with upward movement
*/
function blurInUp(target, options = {}) {
const { duration = 1.2, ease = 'power2.out', delay = 0, blurAmount = 15, distance = 50 } = options;
return gsap.from(toArray(target), {
filter: `blur(${blurAmount}px)`,
y: distance,
opacity: 0,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
/**
* Blur zoom - Blur with scale effect (dramatic entrance)
*/
function blurZoom(target, options = {}) {
const { duration = 1.5, ease = 'power3.out', delay = 0, blurAmount = 30, scale = 1.5 } = options;
return gsap.from(toArray(target), {
filter: `blur(${blurAmount}px)`,
scale,
opacity: 0,
duration,
ease,
delay,
force3D: true,
clearProps: 'all'
});
}
export { blurInUp, blurToFocus, blurZoom, elasticZoom, fadeDown, fadeIn, fadeLeft, fadeOut, fadeRight, fadeUp, flipInX, flipInY, focusToBlur, rotateIn, rotateOut, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutUp, spinIn, zoomIn, zoomInDown, zoomInUp, zoomOut };