move.gl 0.0.1 → 0.0.2

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

@@ -0,0 +1,345 @@
+////
+///
+/// Slide Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for slide animations including slide in/out from all
+/// directions. These keyframes create smooth entrance and exit animations
+/// for UI elements.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+@use "../_base" as *;
+
+
+// ============================================================================
+// Slide In Keyframes
+// ============================================================================
+
+///
+/// Slide in from left.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Starting distance
+///
+@mixin keyframes_slide_in_left($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_in_left) {
+        from {
+            transform: translateX(-$distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide in from right.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Starting distance
+///
+@mixin keyframes_slide_in_right($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_in_right) {
+        from {
+            transform: translateX($distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide in from top.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Starting distance
+///
+@mixin keyframes_slide_in_up($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_in_up) {
+        from {
+            transform: translateY($distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide in from bottom.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Starting distance
+///
+@mixin keyframes_slide_in_down($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_in_down) {
+        from {
+            transform: translateY(-$distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+
+// ============================================================================
+// Slide Out Keyframes
+// ============================================================================
+
+///
+/// Slide out to left.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Ending distance
+///
+@mixin keyframes_slide_out_left($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_out_left) {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX(-$distance);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Slide out to right.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Ending distance
+///
+@mixin keyframes_slide_out_right($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_out_right) {
+        from {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateX($distance);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Slide out to top.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Ending distance
+///
+@mixin keyframes_slide_out_up($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_out_up) {
+        from {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateY(-$distance);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Slide out to bottom.
+///
+/// @param {Length} $distance [$animate_translate_slide] - Ending distance
+///
+@mixin keyframes_slide_out_down($distance: $animate_translate_slide) {
+    @include keyframes(animate_slide_out_down) {
+        from {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateY($distance);
+            opacity: 0;
+        }
+    }
+}
+
+
+// ============================================================================
+// Slide with Fade Keyframes
+// ============================================================================
+
+///
+/// Slide with fade in from above.
+///
+/// @param {Length} $distance [50px] - Starting distance
+///
+@mixin keyframes_slide_fade_in_up($distance: $animate_translate_slide_fade) {
+    @include keyframes(animate_slide_fade_in_up) {
+        from {
+            transform: translateY($distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide with fade in from below.
+///
+/// @param {Length} $distance [50px] - Starting distance
+///
+@mixin keyframes_slide_fade_in_down($distance: $animate_translate_slide_fade) {
+    @include keyframes(animate_slide_fade_in_down) {
+        from {
+            transform: translateY(-$distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide with fade in from left.
+///
+/// @param {Length} $distance [50px] - Starting distance
+///
+@mixin keyframes_slide_fade_in_left($distance: $animate_translate_slide_fade) {
+    @include keyframes(animate_slide_fade_in_left) {
+        from {
+            transform: translateX(-$distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Slide with fade in from right.
+///
+/// @param {Length} $distance [50px] - Starting distance
+///
+@mixin keyframes_slide_fade_in_right($distance: $animate_translate_slide_fade) {
+    @include keyframes(animate_slide_fade_in_right) {
+        from {
+            transform: translateX($distance);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}
+
+
+// ============================================================================
+// Slide Loop Keyframes
+// ============================================================================
+
+///
+/// Continuous horizontal slide loop.
+///
+/// @param {Length} $distance [100%] - Slide distance
+///
+@mixin keyframes_slide_loop_horizontal($distance: 100%) {
+    @include keyframes(animate_slide_loop_horizontal) {
+        0% {
+            transform: translateX(0);
+        }
+        100% {
+            transform: translateX(-$distance);
+        }
+    }
+}
+
+///
+/// Continuous vertical slide loop.
+///
+/// @param {Length} $distance [100%] - Slide distance
+///
+@mixin keyframes_slide_loop_vertical($distance: 100%) {
+    @include keyframes(animate_slide_loop_vertical) {
+        0% {
+            transform: translateY(0);
+        }
+        100% {
+            transform: translateY(-$distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Slide with Bounce Keyframes
+// ============================================================================
+
+///
+/// Slide in from left with bounce.
+///
+/// @param {Length} $distance [100%] - Starting distance
+///
+@mixin keyframes_slide_in_bounce_left($distance: 100%) {
+    @include keyframes(animate_slide_in_bounce_left) {
+        0% {
+            transform: translateX(-$distance);
+            opacity: 0;
+        }
+        60% {
+            transform: translateX(20px);
+            opacity: 1;
+        }
+        80% {
+            transform: translateX(-10px);
+        }
+        100% {
+            transform: translateX(0);
+        }
+    }
+}
+
+///
+/// Slide in from right with bounce.
+///
+/// @param {Length} $distance [100%] - Starting distance
+///
+@mixin keyframes_slide_in_bounce_right($distance: 100%) {
+    @include keyframes(animate_slide_in_bounce_right) {
+        0% {
+            transform: translateX($distance);
+            opacity: 0;
+        }
+        60% {
+            transform: translateX(-20px);
+            opacity: 1;
+        }
+        80% {
+            transform: translateX(10px);
+        }
+        100% {
+            transform: translateX(0);
+        }
+    }
+}

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

@@ -0,0 +1,270 @@
+////
+///
+/// Spin Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for spin/rotation animations including basic spin,
+/// reverse spin, spin with effects like scaling and pulsing. These keyframes
+/// create continuous rotation effects for loaders and icons.
+///
+/// @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 Spin Keyframes
+// ============================================================================
+
+///
+/// Standard continuous spin.
+///
+/// @param {Angle} $start_angle [0deg] - Starting angle
+/// @param {Angle} $end_angle [360deg] - Ending angle
+///
+@mixin keyframes_spin($start_angle: 0deg, $end_angle: 360deg) {
+    @include keyframes(animate_spin) {
+        from {
+            transform: rotate($start_angle);
+        }
+        to {
+            transform: rotate($end_angle);
+        }
+    }
+}
+
+///
+/// Spin with CSS custom property support.
+///
+@mixin keyframes_animate_spin() {
+    @include keyframes(animate_spin) {
+        from {
+            transform: rotate(var(--animate-spin-start, 0deg));
+        }
+        to {
+            transform: rotate(var(--animate-spin-end, #{$animate_angle_full}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Reverse Spin Keyframes
+// ============================================================================
+
+///
+/// Counter-clockwise spin.
+///
+/// @param {Angle} $start_angle [360deg] - Starting angle
+/// @param {Angle} $end_angle [0deg] - Ending angle
+///
+@mixin keyframes_spin_reverse($start_angle: 360deg, $end_angle: 0deg) {
+    @include keyframes(animate_spin_reverse) {
+        from {
+            transform: rotate($start_angle);
+        }
+        to {
+            transform: rotate($end_angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Spin with Scale Keyframes
+// ============================================================================
+
+///
+/// Spin combined with growing effect.
+///
+/// @param {Number} $scale [1.2] - Maximum scale
+///
+@mixin keyframes_spin_grow($scale: $animate_scale_pop) {
+    @include keyframes(animate_spin_grow) {
+        0%, 100% {
+            transform: scale(1) rotate(0deg);
+        }
+        50% {
+            transform: scale($scale) rotate(180deg);
+        }
+    }
+}
+
+///
+/// Spin combined with shrinking effect.
+///
+/// @param {Number} $scale [0.8] - Minimum scale
+///
+@mixin keyframes_spin_shrink($scale: $animate_scale_shrink_min) {
+    @include keyframes(animate_spin_shrink) {
+        0%, 100% {
+            transform: scale(1) rotate(0deg);
+        }
+        50% {
+            transform: scale($scale) rotate(180deg);
+        }
+    }
+}
+
+
+// ============================================================================
+// Spin Pulse Keyframes
+// ============================================================================
+
+///
+/// Spin with pulsing scale effect.
+///
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [1.1] - Maximum scale
+/// @param {Angle} $rotation [360deg] - Full rotation
+///
+@mixin keyframes_spin_pulse($scale_min: 1, $scale_max: $animate_scale_bounce, $rotation: $animate_angle_full) {
+    @include keyframes(animate_spin_pulse) {
+        0%, 100% {
+            transform: rotate(0deg) scale($scale_min);
+        }
+        50% {
+            transform: rotate($rotation) scale($scale_max);
+        }
+    }
+}
+
+
+// ============================================================================
+// Spin with Flip Keyframes
+// ============================================================================
+
+///
+/// Spin combined with 3D flip effect.
+///
+/// @param {Angle} $rotation [360deg] - Z-axis rotation
+/// @param {Angle} $flip [180deg] - Y-axis flip
+///
+@mixin keyframes_spin_flip($rotation: $animate_angle_full, $flip: 180deg) {
+    @include keyframes(animate_spin_flip) {
+        0% {
+            transform: rotateZ(0deg) rotateY(0deg);
+        }
+        50% {
+            transform: rotateZ($rotation * 0.5) rotateY($flip);
+        }
+        100% {
+            transform: rotateZ($rotation) rotateY($flip * 2);
+        }
+    }
+}
+
+
+// ============================================================================
+// Loader Spin Keyframes
+// ============================================================================
+
+///
+/// Loader-style spin with easing.
+///
+@mixin keyframes_spin_loader() {
+    @include keyframes(animate_spin_loader) {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+///
+/// Dual ring loader spin.
+///
+@mixin keyframes_spin_dual() {
+    @include keyframes(animate_spin_dual) {
+        0% {
+            transform: rotate(0deg);
+        }
+        50% {
+            transform: rotate(180deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+
+// ============================================================================
+// Wobble Spin Keyframes
+// ============================================================================
+
+///
+/// Spin with wobbling effect.
+///
+/// @param {Angle} $wobble [5deg] - Wobble angle
+///
+@mixin keyframes_spin_wobble($wobble: $animate_angle_gentle) {
+    @include keyframes(animate_spin_wobble) {
+        0% {
+            transform: rotate(0deg) rotateX(0deg);
+        }
+        25% {
+            transform: rotate(90deg) rotateX($wobble);
+        }
+        50% {
+            transform: rotate(180deg) rotateX(0deg);
+        }
+        75% {
+            transform: rotate(270deg) rotateX(-$wobble);
+        }
+        100% {
+            transform: rotate(360deg) rotateX(0deg);
+        }
+    }
+}
+
+
+// ============================================================================
+// 3D Spin Keyframes
+// ============================================================================
+
+///
+/// 3D spin on X-axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_spin_x($angle: $animate_angle_full) {
+    @include keyframes(animate_spin_x) {
+        from {
+            transform: perspective(400px) rotateX(0deg);
+        }
+        to {
+            transform: perspective(400px) rotateX($angle);
+        }
+    }
+}
+
+///
+/// 3D spin on Y-axis.
+///
+/// @param {Angle} $angle [360deg] - Rotation angle
+///
+@mixin keyframes_spin_y($angle: $animate_angle_full) {
+    @include keyframes(animate_spin_y) {
+        from {
+            transform: perspective(400px) rotateY(0deg);
+        }
+        to {
+            transform: perspective(400px) rotateY($angle);
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+// ============================================================================
+// move.gl | Sway Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Sway Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for sway animations.
+/// Simulates wind or pendulum motion.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Sway Keyframes
+/// @name keyframes_animate_sway
+/// @param {Angle} $angle [5deg] - The maximum angle to sway.
+///
+@mixin keyframes_animate_sway($angle: $animate_angle_sway) {
+    @keyframes animate_sway {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Sway Slow Keyframes
+/// @name keyframes_animate_sway_slow
+/// @param {Angle} $angle [3deg] - The maximum angle to sway.
+///
+@mixin keyframes_animate_sway_slow($angle: $animate_angle_sway_slow) {
+    @keyframes animate_sway_slow {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Sway Fast Keyframes
+/// @name keyframes_animate_sway_fast
+/// @param {Angle} $angle [10deg] - The maximum angle to sway.
+///
+@mixin keyframes_animate_sway_fast($angle: $animate_angle_sway_fast) {
+    @keyframes animate_sway_fast {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Sway Fade Keyframes
+/// @name keyframes_animate_sway_fade
+/// @param {Angle} $angle [5deg] - The maximum angle to sway.
+///
+@mixin keyframes_animate_sway_fade($angle: $animate_angle_sway) {
+    @keyframes animate_sway_fade {
+        0%, 100% {
+            transform: rotate(0deg);
+            opacity: 1;
+        }
+        50% {
+            transform: rotate($angle);
+            opacity: 0.5;
+        }
+    }
+}