Effects System Demo

A lightweight, high-performance animation library for web applications. Explore all available effects below.

A

Basic Effects

Fade In Effect

fadeIn Simple

Simple fade in animation with configurable duration and delay.

<div data-effect="fadeIn, duration=1s">Content...</div>
Slide Up Motion

slideUp Simple

Element slides up from below with fade in effect.

<div data-effect="slideUp, duration=0.8s">Content...</div>
Slide Down Motion

slideDown Simple

Element slides down from above with fade in effect.

<div data-effect="slideDown, duration=0.8s">Content...</div>
Slide Left Motion

slideLeft Simple

Element slides in from the left side.

<div data-effect="slideLeft, duration=0.8s">Content...</div>
Slide Right Motion

slideRight Simple

Element slides in from the right side.

<div data-effect="slideRight, duration=0.8s">Content...</div>
Scale Up Effect

scaleUp Simple

Element scales up from smaller size with fade in.

<div data-effect="scaleUp, duration=0.8s">Content...</div>
Zoom In Effect

zoomIn Simple

Element zooms in from very small size.

<div data-effect="zoomIn, duration=0.8s">Content...</div>
Blur In Effect

blurIn Simple

Element fades in with blur to clear transition.

<div data-effect="blurIn, duration=1.2s">Content...</div>
Rotate In Effect

rotateIn Simple

Element rotates into view from -90 degrees.

<div data-effect="rotateIn, duration=1s">Content...</div>

Text Effects

Typing effect reveals text character by character

textType RAF

Types text character by character like a typewriter.

<div data-effect="textType, duration=2s">Text content...</div>
Words slide up smoothly into view

slideUpWords RAF

Smooth word-by-word reveal with enhanced easing and momentum.

<div data-effect="slideUpWords, duration=1.8s">Text content...</div>
Letters appear with silky smooth motion

slideUpLetters RAF

Ultra-smooth letter-by-letter animation with layered easing and wave motion.

<div data-effect="slideUpLetters, duration=2.2s">Text content...</div>
Glitchy Text Effect

textGlitch RAF

Text appears with digital glitch effect and random characters.

<div data-effect="textGlitch, duration=2s">Text content...</div>
Animated Gradient

gradientText Simple

Text with animated gradient background colors.

<div data-effect="gradientText, duration=1.5s" data-gradient-color1="#ff8a00">Text...</div>
This text will be split into multiple lines and animated with staggered timing for each line

splitLines RAF

Text is automatically split into lines with staggered animation.

<div data-effect="splitLines, duration=1.8s">Text content...</div>
Wave Motion Text

textWave RAF

Letters appear in a wave motion pattern.

<div data-effect="textWave, duration=2s">Text content...</div>
Blur to Clear Text

textBlurReveal RAF

Text appears from blur with staggered word timing.

<div data-effect="textBlurReveal, duration=2s">Text content...</div>
Matrix Code Effect

textMatrix RAF

Matrix-style character reveal with green effect.

<div data-effect="textMatrix, duration=2.5s">Text content...</div>
3D Flip Text Effect

textFlip RAF

Words flip into view with 3D rotation effect.

<div data-effect="textFlip, duration=1.8s">Text content...</div>
Elastic Scale Text

textScale RAF

Letters scale up from tiny to normal with elastic bounce.

<div data-effect="textScale, duration=2s">Text content...</div>
Rainbow Colored Text

textRainbow RAF

Letters appear with cycling rainbow colors and slide up motion.

<div data-effect="textRainbow, duration=1.8s">Text content...</div>
Words slide from alternating sides

textSlide RAF

Words slide in from alternating left and right directions.

<div data-effect="textSlide, duration=1.5s">Text content...</div>
Neon Glow Effect

textNeon RAF

Text appears with animated neon glow effect.

<div data-effect="textNeon, duration=2s" data-neon-color="#00ffff">Text content...</div>
Spiral Text Motion

textSpiral RAF

Letters spiral into their final position with elastic bounce.

<div data-effect="textSpiral, duration=2s">Text content...</div>
Shattering Text Effect

textShatter RAF

Letters shatter into view from random scattered positions.

<div data-effect="textShatter, duration=1.8s">Text content...</div>
Heartbeat Pulse Text

textPulse RAF

Letters pulse into view with heartbeat-like rhythm.

<div data-effect="textPulse, duration=2s">Text content...</div>
Morphing Characters

textMorphChars RAF

Characters morph from random symbols to final text.

<div data-effect="textMorphChars, duration=2.5s">Text content...</div>
Dropping Letters Effect

textDropIn RAF

Letters drop in from above with bouncy gravity effect.

<div data-effect="textDropIn, duration=1.5s">Text content...</div>
Zoom Rotate Text

textZoomRotate RAF

Letters zoom in while rotating from alternating directions.

<div data-effect="textZoomRotate, duration=1.8s">Text content...</div>
Dramatic Slow Reveal

textSlowReveal RAF

Very slow, dramatic character reveal with scale and blur.

<div data-effect="textSlowReveal, duration=3s">Text content...</div>
Smooth Blur to Clear

textBlurAppear RAF

Text appears with smooth blur to clear transition per letter.

<div data-effect="textBlurAppear, duration=2s">Text content...</div>

SVG Effects

svgDraw Simple

Progressively draws SVG paths, circles, and shapes.

<svg data-effect="svgDraw, duration=3s"> <path d="..." /> </svg>

Interactive Effects

3D Tilt Card
Hover to tilt!

tiltCard Interactive

Card tilts in 3D based on mouse position when hovered.

<div data-effect="tiltCard, duration=1s" data-tilt-amount="15">Content...</div>
Ripple Effect

ripple RAF

Creates a ripple wave effect emanating from the center.

<div data-effect="ripple, duration=1.5s">Content...</div>

Advanced Effects

3D Flip Effect

flip3D Simple

3D flip animation with perspective and preserve-3d.

<div data-effect="flip3D, duration=1.2s">Content...</div>
Bouncy Entrance

bounce Simple

Bouncy entrance animation with overshoot easing.

<div data-effect="bounce, duration=1s">Content...</div>
Shake Animation

shake RAF

Horizontal shake/vibration effect with fade in.

<div data-effect="shake, duration=1s">Content...</div>
Floating Element

floating Simple

Continuous subtle floating animation after entrance.

<div data-effect="floating, duration=1s" data-float-amount="8px">Content...</div>
Item 1
Item 2
Item 3
Item 4

staggerChildren RAF

Staggered animation of child elements with customizable selectors.

<div data-effect="staggerChildren, duration=1.5s" data-child-selector=".item">...</div>
Directional Reveal

reveal Simple

Directional reveal using clip-path (left, right, top, bottom).

<div data-effect="reveal, duration=1.2s" data-direction="left">Content...</div>
Morph Transition

morphIn Simple

Smooth morphing transition with scale, rotation, and blur.

<div data-effect="morphIn, duration=1.5s">Content...</div>
Liquid Fade

liquidFade RAF

Liquid-like fade with subtle wave motion and blur.

<div data-effect="liquidFade, duration=1.8s">Content...</div>
Breathing Animation

breathe Simple

Gentle breathing scale animation that continues after entrance.

<div data-effect="breathe, duration=1s">Content...</div>
Smooth Bounce

smoothBounce RAF

Ultra-smooth bounce animation with custom easing curves.

<div data-effect="smoothBounce, duration=1.5s">Content...</div>
Elastic Slide

elasticSlide RAF

Elastic slide with smooth overshoot in any direction.

<div data-effect="elasticSlide, duration=1.5s" data-slide-direction="left">Content...</div>
Smooth Reveal

smoothReveal RAF

Smooth circular reveal with clip-path and scale animation.

<div data-effect="smoothReveal, duration=1.8s">Content...</div>
Glow Effect

glowIn Simple

Element fades in with a glowing drop-shadow effect.

<div data-effect="glowIn, duration=1.5s">Content...</div>
Unfold Animation

unfold Simple

Paper-like unfolding animation with 3D perspective.

<div data-effect="unfold, duration=1.2s">Content...</div>

Want to see all animations again?

Click the button below to reset and replay all animations on this page.