move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/keyframes/animations/_pulse.scss

@@ -0,0 +1,225 @@
+////
+///
+/// Pulse Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for pulse animations including basic pulse, speed
+/// variations, color pulse, and ring pulse effects. These keyframes create
+/// rhythmic scaling and attention-grabbing effects.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+@use "../_base" as *;
+
+
+// ============================================================================
+// Basic Pulse Keyframes
+// ============================================================================
+
+///
+/// Standard pulse animation.
+///
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [$animate_scale_pulse] - Maximum scale
+///
+@mixin keyframes_pulse($scale_min: 1, $scale_max: $animate_scale_pulse) {
+    @include keyframes(animate_pulse) {
+        0%, 100% {
+            transform: scale($scale_min);
+        }
+        50% {
+            transform: scale($scale_max);
+        }
+    }
+}
+
+///
+/// Pulse with CSS custom property support.
+///
+@mixin keyframes_animate_pulse($scale_max: $animate_scale_pulse) {
+    @include keyframes(animate_pulse) {
+        0%, 100% {
+            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
+        }
+        50% {
+            transform: scale(var(--animate-scale-pulse, #{$scale_max}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Slow Pulse Keyframes
+// ============================================================================
+
+///
+/// Slower, subtler pulse.
+///
+/// @param {Number} $scale_min [$animate_scale_pulse_slow_min] - Minimum scale
+/// @param {Number} $scale_max [$animate_scale_pulse_slow_max] - Maximum scale
+///
+@mixin keyframes_pulse_slow($scale_min: $animate_scale_pulse_slow_min, $scale_max: $animate_scale_pulse_slow_max) {
+    @include keyframes(animate_pulse_slow) {
+        0%, 100% {
+            transform: scale($scale_min);
+        }
+        50% {
+            transform: scale($scale_max);
+        }
+    }
+}
+
+
+// ============================================================================
+// Fast Pulse Keyframes
+// ============================================================================
+
+///
+/// Faster, more pronounced pulse.
+///
+/// @param {Number} $scale_min [$animate_scale_pulse_fast_min] - Minimum scale
+/// @param {Number} $scale_max [$animate_scale_pulse_fast_max] - Maximum scale
+///
+@mixin keyframes_pulse_fast($scale_min: $animate_scale_pulse_fast_min, $scale_max: $animate_scale_pulse_fast_max) {
+    @include keyframes(animate_pulse_fast) {
+        0%, 100% {
+            transform: scale($scale_min);
+        }
+        50% {
+            transform: scale($scale_max);
+        }
+    }
+}
+
+
+// ============================================================================
+// Color Pulse Keyframes
+// ============================================================================
+
+///
+/// Pulse with background color transition.
+///
+/// @param {Color} $color_start [$animate_base_color_start] - Starting color
+/// @param {Color} $color_end [$animate_base_color_end] - Ending color
+///
+@mixin keyframes_pulse_color($color_start: $animate_base_color_start, $color_end: $animate_base_color_end) {
+    @include keyframes(animate_pulse_color) {
+        0%, 100% {
+            background-color: $color_start;
+        }
+        50% {
+            background-color: $color_end;
+        }
+    }
+}
+
+
+// ============================================================================
+// Ring Pulse Keyframes
+// ============================================================================
+
+///
+/// Expanding ring effect.
+///
+/// @param {Color} $ring_color [$animate_color_pulse_ring] - Ring color
+/// @param {Length} $ring_size [$animate_pulse_ring_size] - Maximum ring expansion
+///
+@mixin keyframes_pulse_ring($ring_color: $animate_color_pulse_ring, $ring_size: $animate_pulse_ring_size) {
+    @include keyframes(animate_pulse_ring) {
+        0% {
+            box-shadow: 0 0 0 0 $ring_color;
+        }
+        100% {
+            box-shadow: 0 0 0 $ring_size rgba($ring_color, 0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Pulse with Opacity Keyframes
+// ============================================================================
+
+///
+/// Pulse with simultaneous opacity change.
+///
+/// @param {Number} $scale_max [$animate_scale_pulse_fade_max] - Maximum scale
+/// @param {Number} $opacity_min [$animate_opacity_pulse_min] - Minimum opacity
+///
+@mixin keyframes_pulse_fade($scale_max: $animate_scale_pulse_fade_max, $opacity_min: $animate_opacity_pulse_min) {
+    @include keyframes(animate_pulse_fade) {
+        0%, 100% {
+            transform: scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: scale($scale_max);
+            opacity: $opacity_min;
+        }
+    }
+}
+
+
+// ============================================================================
+// Pulse with Glow Keyframes
+// ============================================================================
+
+///
+/// Pulse with glowing box-shadow effect.
+///
+/// @param {Color} $glow_color [currentColor] - Glow color
+/// @param {Length} $glow_size [10px] - Maximum glow size
+/// @param {Number} $scale_max [1.05] - Maximum scale
+///
+@mixin keyframes_pulse_glow($glow_color: currentColor, $glow_size: 10px, $scale_max: 1.05) {
+    @include keyframes(animate_pulse_glow) {
+        0%, 100% {
+            transform: scale(1);
+            box-shadow: 0 0 0 0 rgba($glow_color, 0.4);
+        }
+        50% {
+            transform: scale($scale_max);
+            box-shadow: 0 0 $glow_size 0 rgba($glow_color, 0);
+        }
+    }
+}
+
+
+// ============================================================================
+// Multi-Pulse Keyframes
+// ============================================================================
+
+///
+/// Double pulse pattern.
+///
+/// @param {Number} $scale_small [1.05] - First pulse scale
+/// @param {Number} $scale_large [1.1] - Second pulse scale
+///
+@mixin keyframes_pulse_double($scale_small: 1.05, $scale_large: 1.1) {
+    @include keyframes(animate_pulse_double) {
+        0%, 100% {
+            transform: scale(1);
+        }
+        25% {
+            transform: scale($scale_small);
+        }
+        50% {
+            transform: scale(1);
+        }
+        75% {
+            transform: scale($scale_large);
+        }
+    }
+}

package/dist/scss/mixins/keyframes/animations/_ripple.scss

@@ -0,0 +1,94 @@
+// ============================================================================
+// move.gl | Ripple Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Ripple Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for ripple animations.
+/// Creates expanding ripple effects that scale and fade.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Ripple Keyframes
+/// @name keyframes_animate_ripple
+/// @param {Number} $scale_start [1] - The initial scale.
+/// @param {Number} $scale_end [1.5] - The final scale.
+/// @param {Number} $opacity_start [1] - The initial opacity.
+/// @param {Number} $opacity_end [0] - The final opacity.
+///
+@mixin keyframes_animate_ripple($scale_start: 1, $scale_end: $animate_scale_zoom, $opacity_start: 1, $opacity_end: 0) {
+    @keyframes animate_ripple {
+        0% { transform: scale($scale_start); opacity: $opacity_start; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; }
+    }
+}
+
+
+///
+/// Ripple Slow Keyframes
+/// @name keyframes_animate_ripple_slow
+/// @param {Number} $scale_end [1.5] - The final scale.
+/// @param {Number} $opacity_end [0] - The final opacity.
+///
+@mixin keyframes_animate_ripple_slow($scale_end: $animate_scale_zoom, $opacity_end: 0) {
+    @keyframes animate_ripple_slow {
+        0% { transform: scale(1); opacity: 1; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; }
+    }
+}
+
+
+///
+/// Ripple Multi Keyframes
+/// @name keyframes_animate_ripple_multi
+/// @param {Number} $scale_first [1.2] - The scale at first stage.
+/// @param {Number} $scale_second [1.5] - The scale at second stage.
+/// @param {Number} $opacity_end [0] - The final opacity.
+///
+@mixin keyframes_animate_ripple_multi($scale_first: $animate_scale_pop, $scale_second: $animate_scale_zoom, $opacity_end: 0) {
+    @keyframes animate_ripple_multi {
+        0%, 100% { transform: scale(1); opacity: 1; }
+        50% { transform: scale($scale_first); opacity: 0.5; }
+        100% { transform: scale($scale_second); opacity: $opacity_end; }
+    }
+}
+
+
+///
+/// Ripple Color Keyframes
+/// @name keyframes_animate_ripple_color
+/// @param {Number} $scale_end [1.5] - The final scale.
+/// @param {Number} $opacity_end [0] - The final opacity.
+/// @param {Color} $color_start [transparent] - The starting color.
+/// @param {Color} $color_end [transparent] - The ending color.
+///
+@mixin keyframes_animate_ripple_color($scale_end: $animate_scale_zoom, $opacity_end: 0, $color_start: transparent, $color_end: transparent) {
+    @keyframes animate_ripple_color {
+        0% { transform: scale(1); opacity: 1; background-color: $color_start; }
+        100% { transform: scale($scale_end); opacity: $opacity_end; background-color: $color_end; }
+    }
+}

package/dist/scss/mixins/keyframes/animations/_roll.scss

@@ -0,0 +1,124 @@
+// ============================================================================
+// move.gl | Roll Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Roll Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for roll animations.
+/// Combines translation with rotation.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Roll Keyframes
+/// @name keyframes_animate_roll
+/// @param {Number|String} $translate_distance [100%] - The distance to translate.
+/// @param {Angle} $rotation_angle [360deg] - The rotation angle.
+///
+@mixin keyframes_animate_roll($translate_distance: $animate_translate_slide, $rotation_angle: $animate_angle_full) {
+    @keyframes animate_roll {
+        0% { transform: translateX(0) rotate(0deg); }
+        100% { transform: translateX($translate_distance) rotate($rotation_angle); }
+    }
+}
+
+
+///
+/// Roll Reverse Keyframes
+/// @name keyframes_animate_roll_reverse
+/// @param {Number|String} $translate_distance [-100%] - The distance to translate.
+/// @param {Angle} $rotation_angle [-360deg] - The rotation angle.
+///
+@mixin keyframes_animate_roll_reverse($translate_distance: -$animate_translate_slide, $rotation_angle: -$animate_angle_full) {
+    @keyframes animate_roll_reverse {
+        0% { transform: translateX(0) rotate(0deg); }
+        100% { transform: translateX($translate_distance) rotate($rotation_angle); }
+    }
+}
+
+
+///
+/// Roll Slow Keyframes
+/// @name keyframes_animate_roll_slow
+/// @param {Number|String} $translate_distance [100%] - The distance to translate.
+/// @param {Angle} $rotation_angle [360deg] - The rotation angle.
+///
+@mixin keyframes_animate_roll_slow($translate_distance: $animate_translate_slide, $rotation_angle: $animate_angle_full) {
+    @keyframes animate_roll_slow {
+        0% { transform: translateX(0) rotate(0deg); }
+        100% { transform: translateX($translate_distance) rotate($rotation_angle); }
+    }
+}
+
+
+///
+/// Roll Vertical Keyframes
+/// @name keyframes_animate_roll_vertical
+/// @param {Number|String} $translate_distance [100%] - The distance to translate.
+/// @param {Angle} $rotation_angle [360deg] - The rotation angle.
+///
+@mixin keyframes_animate_roll_vertical($translate_distance: $animate_translate_slide, $rotation_angle: $animate_angle_full) {
+    @keyframes animate_roll_vertical {
+        0% { transform: translateY(0) rotate(0deg); }
+        100% { transform: translateY($translate_distance) rotate($rotation_angle); }
+    }
+}
+
+
+///
+/// Roll In Keyframes (from animate.css by Nick Pettit)
+/// @name keyframes_animate_roll_in
+///
+@mixin keyframes_animate_roll_in() {
+    @keyframes animate_roll_in {
+        0% {
+            opacity: 0;
+            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+        }
+        100% {
+            opacity: 1;
+            transform: none;
+        }
+    }
+}
+
+
+///
+/// Roll Out Keyframes
+/// @name keyframes_animate_roll_out
+///
+@mixin keyframes_animate_roll_out() {
+    @keyframes animate_roll_out {
+        0% {
+            opacity: 1;
+            transform: none;
+        }
+        100% {
+            opacity: 0;
+            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+        }
+    }
+}