move.gl

<!DOCTYPE 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>  <link rel="stylesheet" href="/css/move.gl.css" />  <link rel="stylesheet" href="/css/move.gl.docs.css" />  <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> <main class="main"> <div class="container"><section class="section"> <h1 class="section-title">🎬 Animation Overview</h1> <p class="section-description"> Complete showcase of all animations in the move.gl library. Each card shows the animation preview and the HTML code needed to implement it. </p> <h2 class="demo-section-title">✨ Fade Animations</h2> <p class="demo-section-desc">Opacity-based fade effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_fade"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">fade</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_fade"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_fade_in"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">fade_in</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_fade_in"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_fade_out"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">fade_out</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_fade_out"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_fade_gradual"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">fade_gradual</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_fade_gradual"></div></code> </div> </div> </div> <h2 class="demo-section-title">↔️ Slide Animations</h2> <p class="demo-section-desc">Directional slide movements</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_in_up"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_in_up</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_in_up"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_in_down"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_in_down</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_in_down"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_in_left"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_in_left</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_in_left"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_in_right"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_in_right</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_in_right"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_out_up"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_out_up</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_out_up"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_out_down"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_out_down</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_out_down"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_out_left"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_out_left</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_out_left"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_out_right"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_out_right</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_out_right"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_fade_in_up"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_fade_in_up</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_fade_in_up"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_fade_in_down"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_fade_in_down</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_fade_in_down"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_fade_in_left"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_fade_in_left</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_fade_in_left"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_slide_fade_in_right"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">slide_fade_in_right</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_slide_fade_in_right"></div></code> </div> </div> </div> <h2 class="demo-section-title">⬆️ Bounce Animations</h2> <p class="demo-section-desc">Elastic bouncing effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_bounce"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">bounce</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_bounce"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_bounce_extended"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">bounce_extended</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_bounce_extended"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_bounce_rotate"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">bounce_rotate</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_bounce_rotate"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_bounce_multi"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">bounce_multi</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_bounce_multi"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_elastic"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">elastic</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_elastic"></div></code> </div> </div> </div> <h2 class="demo-section-title">🔍 Zoom Animations</h2> <p class="demo-section-desc">Scale-based zoom effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_zoom"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">zoom</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_zoom"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_zoom_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">zoom_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_zoom_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_zoom_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">zoom_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_zoom_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_zoom_fade"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">zoom_fade</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_zoom_fade"></div></code> </div> </div> </div> <h2 class="demo-section-title">📐 Scale Animations</h2> <p class="demo-section-desc">Size transformation effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_scale_expand"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">scale_expand</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_scale_expand"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_scale_shrink"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">scale_shrink</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_scale_shrink"></div></code> </div> </div> </div> <h2 class="demo-section-title">🔄 Flip Animations</h2> <p class="demo-section-desc">3D rotation effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_horizontal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_horizontal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_horizontal"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_vertical"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_vertical</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_vertical"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_diagonal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_diagonal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_diagonal"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_180_horizontal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_180_horizontal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_180_horizontal"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_180_vertical"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_180_vertical</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_180_vertical"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flip_180_diagonal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flip_180_diagonal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flip_180_diagonal"></div></code> </div> </div> </div> <h2 class="demo-section-title">🔃 Spin Animations</h2> <p class="demo-section-desc">Continuous rotation effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_spin"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">spin</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_spin"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_spin_reverse"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">spin_reverse</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_spin_reverse"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_spin_pulse"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">spin_pulse</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_spin_pulse"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_spin_flip"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">spin_flip</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_spin_flip"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_spin_grow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">spin_grow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_spin_grow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_roll"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">roll</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_roll"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_roll_reverse"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">roll_reverse</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_roll_reverse"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_roll_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">roll_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_roll_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_roll_vertical"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">roll_vertical</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_roll_vertical"></div></code> </div> </div> </div> <h2 class="demo-section-title">📳 Shake Animations</h2> <p class="demo-section-desc">Vibration and shake effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_shake"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">shake</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_shake"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_shake_horizontal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">shake_horizontal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_shake_horizontal"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_shake_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">shake_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_shake_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_wobble"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">wobble</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_wobble"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_wobble_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">wobble_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_wobble_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_wobble_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">wobble_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_wobble_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_wobble_scale"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">wobble_scale</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_wobble_scale"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_jiggle"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">jiggle</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_jiggle"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_jiggle_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">jiggle_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_jiggle_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_jiggle_multi"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">jiggle_multi</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_jiggle_multi"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_jiggle_vertical"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">jiggle_vertical</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_jiggle_vertical"></div></code> </div> </div> </div> <h2 class="demo-section-title">💗 Pulse Animations</h2> <p class="demo-section-desc">Breathing and pulsing effects</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pulse"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pulse</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pulse"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pulse_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pulse_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pulse_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pulse_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pulse_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pulse_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pulse_color"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pulse_color</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pulse_color"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_heartbeat"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">heartbeat</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_heartbeat"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_heartbeat_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">heartbeat_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_heartbeat_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_heartbeat_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">heartbeat_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_heartbeat_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_heartbeat_color"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">heartbeat_color</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_heartbeat_color"></div></code> </div> </div> </div> <h2 class="demo-section-title">👀 Attention Seekers</h2> <p class="demo-section-desc">Effects to grab attention</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flash"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flash</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flash"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flash_fade"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flash_fade</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flash_fade"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flash_fade_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flash_fade_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flash_fade_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_flash_strobe"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">flash_strobe</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_flash_strobe"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_blink"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">blink</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_blink"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_blink_rapid"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">blink_rapid</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_blink_rapid"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_blink_soft"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">blink_soft</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_blink_soft"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_blink_alternate"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">blink_alternate</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_blink_alternate"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_beat"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">beat</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_beat"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_beat_double"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">beat_double</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_beat_double"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_beat_fade"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">beat_fade</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_beat_fade"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pop"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pop</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pop"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pop_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pop_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pop_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pop_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pop_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pop_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_pop_rotate"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">pop_rotate</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_pop_rotate"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_tada"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">tada</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_tada"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_tada_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">tada_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_tada_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_tada_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">tada_fast</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_tada_fast"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_tada_fade"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">tada_fade</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_tada_fade"></div></code> </div> </div> </div> <h2 class="demo-section-title">🎯 Special Effects</h2> <p class="demo-section-desc">Unique and complex animations</p> <div class="demo-grid-fixed"> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_float"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">float</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_float"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_float_horizontal"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">float_horizontal</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_float_horizontal"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_float_rotate"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">float_rotate</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_float_rotate"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_sway"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">sway</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_sway"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_sway_slow"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fixed__title">sway_slow</h4> </div> <div class="demo-card-fixed__code"> <code><div class="animate_sway_slow"></div></code> </div> </div> <div class="demo-card-fixed"> <div class="demo-card-fixed__preview"> <div class="demo-box animate_sway_fast"></div> </div> <div class="demo-card-fixed__info"> <h4 class="demo-card-fi