{% extends "_base.html.jinja" %} {% set page_title = "Animation Overview | move.gl" %} {% set body_class = "page-overview" %} {% block content %}

🎬 Animation Overview

Complete showcase of all animations in the move.gl library. Each card shows the animation preview and the HTML code needed to implement it.

{# Fade Animations #}

✨ Fade Animations

Opacity-based fade effects

fade

<div class="animate_fade"></div>

fade_in

<div class="animate_fade_in"></div>

fade_out

<div class="animate_fade_out"></div>

fade_gradual

<div class="animate_fade_gradual"></div>
{# Slide Animations #}

↔️ Slide Animations

Directional slide movements

slide_in_up

<div class="animate_slide_in_up"></div>

slide_in_down

<div class="animate_slide_in_down"></div>

slide_in_left

<div class="animate_slide_in_left"></div>

slide_in_right

<div class="animate_slide_in_right"></div>

slide_out_up

<div class="animate_slide_out_up"></div>

slide_out_down

<div class="animate_slide_out_down"></div>

slide_out_left

<div class="animate_slide_out_left"></div>

slide_out_right

<div class="animate_slide_out_right"></div>

slide_fade_in_up

<div class="animate_slide_fade_in_up"></div>

slide_fade_in_down

<div class="animate_slide_fade_in_down"></div>

slide_fade_in_left

<div class="animate_slide_fade_in_left"></div>

slide_fade_in_right

<div class="animate_slide_fade_in_right"></div>
{# Bounce Animations #}

⬆️ Bounce Animations

Elastic bouncing effects

bounce

<div class="animate_bounce"></div>

bounce_extended

<div class="animate_bounce_extended"></div>

bounce_rotate

<div class="animate_bounce_rotate"></div>

bounce_multi

<div class="animate_bounce_multi"></div>

elastic

<div class="animate_elastic"></div>
{# Zoom Animations #}

🔍 Zoom Animations

Scale-based zoom effects

zoom

<div class="animate_zoom"></div>

zoom_slow

<div class="animate_zoom_slow"></div>

zoom_fast

<div class="animate_zoom_fast"></div>

zoom_fade

<div class="animate_zoom_fade"></div>
{# Scale Animations #}

📐 Scale Animations

Size transformation effects

scale_expand

<div class="animate_scale_expand"></div>

scale_shrink

<div class="animate_scale_shrink"></div>
{# Flip Animations #}

🔄 Flip Animations

3D rotation effects

flip

<div class="animate_flip"></div>

flip_horizontal

<div class="animate_flip_horizontal"></div>

flip_vertical

<div class="animate_flip_vertical"></div>

flip_diagonal

<div class="animate_flip_diagonal"></div>

flip_180_horizontal

<div class="animate_flip_180_horizontal"></div>

flip_180_vertical

<div class="animate_flip_180_vertical"></div>

flip_180_diagonal

<div class="animate_flip_180_diagonal"></div>
{# Spin Animations #}

🔃 Spin Animations

Continuous rotation effects

spin

<div class="animate_spin"></div>

spin_reverse

<div class="animate_spin_reverse"></div>

spin_pulse

<div class="animate_spin_pulse"></div>

spin_flip

<div class="animate_spin_flip"></div>

spin_grow

<div class="animate_spin_grow"></div>

roll

<div class="animate_roll"></div>

roll_reverse

<div class="animate_roll_reverse"></div>

roll_slow

<div class="animate_roll_slow"></div>

roll_vertical

<div class="animate_roll_vertical"></div>
{# Shake Animations #}

📳 Shake Animations

Vibration and shake effects

shake

<div class="animate_shake"></div>

shake_horizontal

<div class="animate_shake_horizontal"></div>

shake_slow

<div class="animate_shake_slow"></div>

wobble

<div class="animate_wobble"></div>

wobble_slow

<div class="animate_wobble_slow"></div>

wobble_fast

<div class="animate_wobble_fast"></div>

wobble_scale

<div class="animate_wobble_scale"></div>

jiggle

<div class="animate_jiggle"></div>

jiggle_slow

<div class="animate_jiggle_slow"></div>

jiggle_multi

<div class="animate_jiggle_multi"></div>

jiggle_vertical

<div class="animate_jiggle_vertical"></div>
{# Pulse Animations #}

💗 Pulse Animations

Breathing and pulsing effects

pulse

<div class="animate_pulse"></div>

pulse_slow

<div class="animate_pulse_slow"></div>

pulse_fast

<div class="animate_pulse_fast"></div>

pulse_color

<div class="animate_pulse_color"></div>

heartbeat

<div class="animate_heartbeat"></div>

heartbeat_slow

<div class="animate_heartbeat_slow"></div>

heartbeat_fast

<div class="animate_heartbeat_fast"></div>

heartbeat_color

<div class="animate_heartbeat_color"></div>
{# Attention Seekers #}

👀 Attention Seekers

Effects to grab attention

flash

<div class="animate_flash"></div>

flash_fade

<div class="animate_flash_fade"></div>

flash_fade_slow

<div class="animate_flash_fade_slow"></div>

flash_strobe

<div class="animate_flash_strobe"></div>

blink

<div class="animate_blink"></div>

blink_rapid

<div class="animate_blink_rapid"></div>

blink_soft

<div class="animate_blink_soft"></div>

blink_alternate

<div class="animate_blink_alternate"></div>

beat

<div class="animate_beat"></div>

beat_double

<div class="animate_beat_double"></div>

beat_fade

<div class="animate_beat_fade"></div>

pop

<div class="animate_pop"></div>

pop_slow

<div class="animate_pop_slow"></div>

pop_fast

<div class="animate_pop_fast"></div>

pop_rotate

<div class="animate_pop_rotate"></div>

tada

<div class="animate_tada"></div>

tada_slow

<div class="animate_tada_slow"></div>

tada_fast

<div class="animate_tada_fast"></div>

tada_fade

<div class="animate_tada_fade"></div>
{# Special Effects #}

🎯 Special Effects

Unique and complex animations

float

<div class="animate_float"></div>

float_horizontal

<div class="animate_float_horizontal"></div>

float_rotate

<div class="animate_float_rotate"></div>

sway

<div class="animate_sway"></div>

sway_slow

<div class="animate_sway_slow"></div>

sway_fast

<div class="animate_sway_fast"></div>

sway_fade

<div class="animate_sway_fade"></div>

swing

<div class="animate_swing"></div>

swing_slow

<div class="animate_swing_slow"></div>

swing_fast

<div class="animate_swing_fast"></div>

swing_fade

<div class="animate_swing_fade"></div>

twist

<div class="animate_twist"></div>

twist_slow

<div class="animate_twist_slow"></div>

twist_fast

<div class="animate_twist_fast"></div>

twist_color

<div class="animate_twist_color"></div>

nod

<div class="animate_nod"></div>

nod_slow

<div class="animate_nod_slow"></div>

nod_continuous

<div class="animate_nod_continuous"></div>

nod_bounce

<div class="animate_nod_bounce"></div>

wave

<div class="animate_wave"></div>

wave_slow

<div class="animate_wave_slow"></div>

wave_fast

<div class="animate_wave_fast"></div>

wave_fade

<div class="animate_wave_fade"></div>

glow

<div class="animate_glow"></div>

glow_soft

<div class="animate_glow_soft"></div>

glow_pulse

<div class="animate_glow_pulse"></div>

glow_multicolor

<div class="animate_glow_multicolor"></div>

ripple

<div class="animate_ripple"></div>

ripple_slow

<div class="animate_ripple_slow"></div>

ripple_multi

<div class="animate_ripple_multi"></div>

ripple_color

<div class="animate_ripple_color"></div>
{% endblock content %}