move.gl
Version:
Motion and Animation Library for Stylescape.
814 lines (737 loc) • 27.4 kB
HTML
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description"
content="Motion and Animation Library — CSS animations, transitions, keyframes, and interactive motion effects." />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
<title>move.gl</title>
<!-- Library CSS -->
<link rel="stylesheet" href="/css/move.gl.css" />
<!-- Documentation CSS -->
<link rel="stylesheet" href="/css/move.gl.docs.css" />
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet">
</head>
<body class="">
<div class="nav-wrapper">
<nav class="nav">
<div class="nav__inner">
<a href="index.html" class="nav__logo">
<span class="nav__logo-text">move.gl</span>
<span class="nav__version">v0.0.1</span>
</a>
<div class="nav__right">
<button type="button" class="theme-toggle" data-toggle="theme" title="Toggle dark mode" aria-label="Toggle dark mode">
<svg class="theme-icon theme-icon--light" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zm7-5a.75.75 0 00-.75-.75h-1.5a.75.75 0 000 1.5h1.5A.75.75 0 0015 8zM3 8a.75.75 0 00-.75-.75H.75a.75.75 0 000 1.5h1.5A.75.75 0 003 8zm9.536-4.536a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 001.06 1.061l1.061-1.06a.75.75 0 000-1.061zm-9.072 9.072a.75.75 0 00-1.06 0l-1.061 1.06a.75.75 0 101.06 1.061l1.061-1.06a.75.75 0 000-1.061zm9.072 0a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 101.061-1.06l-1.06-1.061zm-9.072-9.072a.75.75 0 00-1.06 1.06l1.06 1.061a.75.75 0 001.061-1.06l-1.06-1.061z" />
</svg>
<svg class="theme-icon theme-icon--dark" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M6.2 1A6.98 6.98 0 008 7a6.98 6.98 0 00-1.8 6A7 7 0 116.2 1z" />
</svg>
</button>
<div class="nav__dropdown" id="nav-dropdown">
<button type="button" class="nav__dropdown-toggle" aria-expanded="false" aria-haspopup="true">
<span>Docs</span>
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor"
stroke-width="1.5">
<path d="M1 1l4 4 4-4" />
</svg>
</button>
<div class="nav__dropdown-menu" role="menu">
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Learn</span>
<a href="getting-started.html" role="menuitem">Getting Started</a>
<a href="core-concepts.html" role="menuitem">Core Concepts</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Overview</span>
<a href="test_overview.html" role="menuitem">All Animations</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Animations</span>
<a href="test_fade.html" role="menuitem">Fade</a>
<a href="test_slide.html" role="menuitem">Slide</a>
<a href="test_bounce.html" role="menuitem">Bounce</a>
<a href="test_zoom.html" role="menuitem">Zoom</a>
<a href="test_flip.html" role="menuitem">Flip</a>
<a href="test_scale.html" role="menuitem">Scale</a>
<a href="test_spin.html" role="menuitem">Spin & Rotate</a>
<a href="test_pulse.html" role="menuitem">Pulse</a>
<a href="test_shake.html" role="menuitem">Shake & Wobble</a>
<a href="test_attention.html" role="menuitem">Attention</a>
<a href="test_special.html" role="menuitem">Special Effects</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">Effects</span>
<a href="test_loaders.html" role="menuitem">Loaders</a>
<a href="test_transitions.html" role="menuitem">Transitions</a>
<a href="test_transforms.html" role="menuitem">Transforms</a>
<a href="test_effects.html" role="menuitem">Filter Effects</a>
<a href="test_keyframes.html" role="menuitem">Keyframes</a>
<a href="test_mouse.html" role="menuitem">Mouse Interactions</a>
</div>
<div class="nav__dropdown-section">
<span class="nav__dropdown-label">TypeScript Demos</span>
<a href="demo_draggable.html" role="menuitem">Draggable</a>
<a href="demo_gesture.html" role="menuitem">Gesture Handler</a>
<a href="demo_keyboard.html" role="menuitem">Virtual Keyboard</a>
<a href="demo_screensaver.html" role="menuitem">Screensaver</a>
<a href="demo_video_overlay.html" role="menuitem">Video Overlay</a>
</div>
</div>
</div>
<a href="https://github.com/stylescape/move.gl" class="nav__github" target="_blank"
title="View on GitHub">
<svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
</div>
</div>
</nav>
</div>
<div class="container">
<header class="header"><p class="eyebrow">Animations</p>
<h1>All Animations</h1> </header>
<main>
<section>
<h2>Beat Animations</h2>
<p>Rhythmic beating effects for attention-grabbing elements.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_beat"></div>
<p>beat</p>
</div>
<div class="demo-item">
<div class="demo-box animate_beat_fade"></div>
<p>beat-fade</p>
</div>
<div class="demo-item">
<div class="demo-box animate_beat_double"></div>
<p>beat-double</p>
</div>
</div>
</section>
<section>
<h2>Blink Animations</h2>
<p>Blinking effects for cursor-like or attention elements.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_blink"></div>
<p>blink</p>
</div>
<div class="demo-item">
<div class="demo-box animate_blink_rapid"></div>
<p>blink-rapid</p>
</div>
<div class="demo-item">
<div class="demo-box animate_blink_soft"></div>
<p>blink-soft</p>
</div>
<div class="demo-item">
<div class="demo-box animate_blink_alternate"></div>
<p>blink-alternate</p>
</div>
</div>
</section>
<section>
<h2>Bounce Animations</h2>
<p>Playful bouncing effects with elastic easing.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_bounce"></div>
<p>bounce</p>
</div>
<div class="demo-item">
<div class="demo-box animate_bounce_extended"></div>
<p>bounce-extended</p>
</div>
<div class="demo-item">
<div class="demo-box animate_bounce_rotate"></div>
<p>bounce-rotate</p>
</div>
<div class="demo-item">
<div class="demo-box animate_bounce_multi"></div>
<p>bounce-multi</p>
</div>
</div>
</section>
<section>
<h2>Elastic Animations</h2>
<p>Springy elastic effects with overshoot.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_elastic"></div>
<p>elastic</p>
</div>
</div>
</section>
<section>
<h2>Fade Animations</h2>
<p>Smooth opacity transitions.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_fade"></div>
<p>fade</p>
</div>
<div class="demo-item">
<div class="demo-box animate_fade_in"></div>
<p>fade-in</p>
</div>
<div class="demo-item">
<div class="demo-box animate_fade_out"></div>
<p>fade-out</p>
</div>
<div class="demo-item">
<div class="demo-box animate_fade_gradual"></div>
<p>fade-gradual</p>
</div>
</div>
</section>
<section>
<h2>Flash Animations</h2>
<p>Quick flashing effects for alerts and notifications.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_flash"></div>
<p>flash</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flash_fade"></div>
<p>flash-fade</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flash_strobe"></div>
<p>flash-strobe</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flash_fade_slow"></div>
<p>flash-fade-slow</p>
</div>
</div>
</section>
<section>
<h2>Flip Animations</h2>
<p>3D flip effects along different axes.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_flip"></div>
<p>flip</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_horizontal"></div>
<p>flip-horizontal</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_vertical"></div>
<p>flip-vertical</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_diagonal"></div>
<p>flip-diagonal</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_180_horizontal"></div>
<p>flip-180-h</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_180_vertical"></div>
<p>flip-180-v</p>
</div>
<div class="demo-item">
<div class="demo-box animate_flip_180_diagonal"></div>
<p>flip-180-d</p>
</div>
</div>
</section>
<section>
<h2>Float Animations</h2>
<p>Gentle floating effects for dreamy UIs.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_float"></div>
<p>float</p>
</div>
<div class="demo-item">
<div class="demo-box animate_float_horizontal"></div>
<p>float-horizontal</p>
</div>
<div class="demo-item">
<div class="demo-box animate_float_rotate"></div>
<p>float-rotate</p>
</div>
</div>
</section>
<section>
<h2>Glow Animations</h2>
<p>Glowing effects using box-shadow.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_glow"></div>
<p>glow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_glow_pulse"></div>
<p>glow-pulse</p>
</div>
<div class="demo-item">
<div class="demo-box animate_glow_multicolor"></div>
<p>glow-multicolor</p>
</div>
</div>
</section>
<section>
<h2>Heartbeat Animations</h2>
<p>Pulsing heartbeat effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_heartbeat"></div>
<p>heartbeat</p>
</div>
<div class="demo-item">
<div class="demo-box animate_heartbeat_fast"></div>
<p>heartbeat-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_heartbeat_slow"></div>
<p>heartbeat-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_heartbeat_color"></div>
<p>heartbeat-color</p>
</div>
</div>
</section>
<section>
<h2>Jiggle Animations</h2>
<p>Small jiggling movements.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_jiggle"></div>
<p>jiggle</p>
</div>
<div class="demo-item">
<div class="demo-box animate_jiggle_vertical"></div>
<p>jiggle-vertical</p>
</div>
<div class="demo-item">
<div class="demo-box animate_jiggle_multi"></div>
<p>jiggle-multi</p>
</div>
<div class="demo-item">
<div class="demo-box animate_jiggle_slow"></div>
<p>jiggle-slow</p>
</div>
</div>
</section>
<section>
<h2>Nod Animations</h2>
<p>Nodding head-like animations.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_nod"></div>
<p>nod</p>
</div>
<div class="demo-item">
<div class="demo-box animate_nod_slow"></div>
<p>nod-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_nod_bounce"></div>
<p>nod-bounce</p>
</div>
<div class="demo-item">
<div class="demo-box animate_nod_continuous"></div>
<p>nod-continuous</p>
</div>
</div>
</section>
<section>
<h2>Pop Animations</h2>
<p>Quick pop-in effects for emphasis.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_pop"></div>
<p>pop</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pop_fast"></div>
<p>pop-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pop_slow"></div>
<p>pop-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pop_rotate"></div>
<p>pop-rotate</p>
</div>
</div>
</section>
<section>
<h2>Pulse Animations</h2>
<p>Rhythmic pulsing scale effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_pulse"></div>
<p>pulse</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pulse_slow"></div>
<p>pulse-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pulse_fast"></div>
<p>pulse-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_pulse_color"></div>
<p>pulse-color</p>
</div>
</div>
</section>
<section>
<h2>Ripple Animations</h2>
<p>Expanding ripple effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_ripple"></div>
<p>ripple</p>
</div>
<div class="demo-item">
<div class="demo-box animate_ripple_slow"></div>
<p>ripple-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_ripple_multi"></div>
<p>ripple-multi</p>
</div>
<div class="demo-item">
<div class="demo-box animate_ripple_color"></div>
<p>ripple-color</p>
</div>
</div>
</section>
<section>
<h2>Roll Animations</h2>
<p>Rolling entrance and movement effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_roll"></div>
<p>roll</p>
</div>
<div class="demo-item">
<div class="demo-box animate_roll_reverse"></div>
<p>roll-reverse</p>
</div>
<div class="demo-item">
<div class="demo-box animate_roll_slow"></div>
<p>roll-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_roll_vertical"></div>
<p>roll-vertical</p>
</div>
</div>
</section>
<section>
<h2>Scale Animations</h2>
<p>Scaling transform effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_scale_expand"></div>
<p>scale-expand</p>
</div>
<div class="demo-item">
<div class="demo-box animate_scale_shrink"></div>
<p>scale-shrink</p>
</div>
</div>
</section>
<section>
<h2>Shake Animations</h2>
<p>Shaking effects for errors and attention.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_shake"></div>
<p>shake</p>
</div>
<div class="demo-item">
<div class="demo-box animate_shake_slow"></div>
<p>shake-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_shake_horizontal"></div>
<p>shake-horizontal</p>
</div>
</div>
</section>
<section>
<h2>Slide Animations</h2>
<p>Sliding entrance and exit effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_slide_in_left"></div>
<p>slide-in-left</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_in_right"></div>
<p>slide-in-right</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_in_up"></div>
<p>slide-in-up</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_in_down"></div>
<p>slide-in-down</p>
</div>
</div>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_slide_out_left"></div>
<p>slide-out-left</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_out_right"></div>
<p>slide-out-right</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_out_up"></div>
<p>slide-out-up</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_out_down"></div>
<p>slide-out-down</p>
</div>
</div>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_slide_fade_in_up"></div>
<p>slide-fade-in-up</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_fade_in_down"></div>
<p>slide-fade-in-down</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_fade_in_left"></div>
<p>slide-fade-in-left</p>
</div>
<div class="demo-item">
<div class="demo-box animate_slide_fade_in_right"></div>
<p>slide-fade-in-right</p>
</div>
</div>
</section>
<section>
<h2>Spin Animations</h2>
<p>Continuous rotation effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_spin"></div>
<p>spin</p>
</div>
<div class="demo-item">
<div class="demo-box animate_spin_reverse"></div>
<p>spin-reverse</p>
</div>
<div class="demo-item">
<div class="demo-box animate_spin_grow"></div>
<p>spin-grow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_spin_pulse"></div>
<p>spin-pulse</p>
</div>
<div class="demo-item">
<div class="demo-box animate_spin_flip"></div>
<p>spin-flip</p>
</div>
</div>
</section>
<section>
<h2>Sway Animations</h2>
<p>Gentle swaying motions.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_sway"></div>
<p>sway</p>
</div>
<div class="demo-item">
<div class="demo-box animate_sway_slow"></div>
<p>sway-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_sway_fast"></div>
<p>sway-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_sway_fade"></div>
<p>sway-fade</p>
</div>
</div>
</section>
<section>
<h2>Tada Animations</h2>
<p>Celebratory attention-grabbing effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_tada"></div>
<p>tada</p>
</div>
<div class="demo-item">
<div class="demo-box animate_tada_slow"></div>
<p>tada-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_tada_fast"></div>
<p>tada-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_tada_fade"></div>
<p>tada-fade</p>
</div>
</div>
</section>
<section>
<h2>Twist Animations</h2>
<p>Twisting rotation effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_twist"></div>
<p>twist</p>
</div>
<div class="demo-item">
<div class="demo-box animate_twist_slow"></div>
<p>twist-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_twist_fast"></div>
<p>twist-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_twist_color"></div>
<p>twist-color</p>
</div>
</div>
</section>
<section>
<h2>Wave Animations</h2>
<p>Waving hand-like motions.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_wave"></div>
<p>wave</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wave_slow"></div>
<p>wave-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wave_fast"></div>
<p>wave-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wave_fade"></div>
<p>wave-fade</p>
</div>
</div>
</section>
<section>
<h2>Wobble Animations</h2>
<p>Wobbly side-to-side effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_wobble"></div>
<p>wobble</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wobble_slow"></div>
<p>wobble-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wobble_fast"></div>
<p>wobble-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_wobble_scale"></div>
<p>wobble-scale</p>
</div>
</div>
</section>
<section>
<h2>Zoom Animations</h2>
<p>Zoom in/out effects.</p>
<div class="demo-row">
<div class="demo-item">
<div class="demo-box animate_zoom"></div>
<p>zoom</p>
</div>
<div class="demo-item">
<div class="demo-box animate_zoom_slow"></div>
<p>zoom-slow</p>
</div>
<div class="demo-item">
<div class="demo-box animate_zoom_fast"></div>
<p>zoom-fast</p>
</div>
<div class="demo-item">
<div class="demo-box animate_zoom_fade"></div>
<p>zoom-fade</p>
</div>
</div>
</section>
<section>
<h2>Usage</h2>
<div class="code-block"><span class="comment">// SCSS Mixin Usage</span>
.element {
@include animate_bounce();
}
.element-pulse {
@include animate_pulse_slow();
}
<span class="comment">// With custom parameters</span>
.custom-shake {
@include animate_shake($duration: 0.5s);
}
<span class="comment">// CSS Class Usage</span>
<div class="animate_bounce">...</div>
<div class="animate_pulse">...</div>
<div class="animate_shake">...</div>
<span class="comment">// Combine with other utilities</span>
<div class="animate_fade_in delay-500">...</div>
</div>
</section> </main>
<footer class="footer">
<div class="footer__content">
<div class="footer__left">
<span class="footer__brand">move.gl</span>
<span class="footer__tagline">Motion & Animation Library</span>
</div>
<div class="footer__right">
<div class="footer__links">
<a href="https://github.com/stylescape/move.gl" class="footer__link" target="_blank">GitHub</a>
<a href="https://www.npmjs.com/package/move.gl" class="footer__link" target="_blank">npm</a>
<a href="https://www.scape.agency" class="footer__link" target="_blank">Scape Agency</a>
</div>
<span class="footer__copyright">© 2024 Scape Agency. MIT License.</span>
</div>
</div>
</footer>
</div>
<!-- Library JS -->
<script type="module" src="/js/move.gl.js"></script>
<!-- Demo Scripts -->
<script type="module" src="/js/demo.js"></script>
</body>
</html>