move.gl 0.0.1 → 0.0.2

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

@@ -0,0 +1,89 @@
+// ============================================================================
+// move.gl | Twist Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Twist Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for twist animations.
+/// Combines rotation with scale changes.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Twist Keyframes
+/// @name keyframes_animate_twist
+/// @param {Number} $scale_end [0.9] - The scale factor at midpoint.
+/// @param {Angle} $rotation [10deg] - The rotation angle at midpoint.
+///
+@mixin keyframes_animate_twist($scale_end: $animate_scale_twist_end, $rotation: $animate_angle_twist) {
+    @keyframes animate_twist {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($rotation); }
+    }
+}
+
+
+///
+/// Twist Slow Keyframes
+/// @name keyframes_animate_twist_slow
+/// @param {Number} $scale_end [0.95] - The scale factor at midpoint.
+/// @param {Angle} $rotation [5deg] - The rotation angle at midpoint.
+///
+@mixin keyframes_animate_twist_slow($scale_end: $animate_scale_twist_slow_end, $rotation: $animate_angle_twist_slow) {
+    @keyframes animate_twist_slow {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($rotation); }
+    }
+}
+
+
+///
+/// Twist Fast Keyframes
+/// @name keyframes_animate_twist_fast
+/// @param {Number} $scale_end [0.85] - The scale factor at midpoint.
+/// @param {Angle} $rotation [15deg] - The rotation angle at midpoint.
+///
+@mixin keyframes_animate_twist_fast($scale_end: $animate_scale_twist_fast_end, $rotation: $animate_angle_twist_fast) {
+    @keyframes animate_twist_fast {
+        0%, 100% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale($scale_end) rotate($rotation); }
+    }
+}
+
+
+///
+/// Twist Color Keyframes
+/// @name keyframes_animate_twist_color
+/// @param {Number} $scale_end [0.9] - The scale factor at midpoint.
+/// @param {Angle} $rotation [10deg] - The rotation angle at midpoint.
+/// @param {Color} $color_start [inherit] - The starting color.
+/// @param {Color} $color_end [inherit] - The ending color.
+///
+@mixin keyframes_animate_twist_color($scale_end: $animate_scale_twist_end, $rotation: $animate_angle_twist, $color_start: inherit, $color_end: inherit) {
+    @keyframes animate_twist_color {
+        0%, 100% {
+            transform: scale(1) rotate(0deg);
+            color: $color_start;
+        }
+        50% {
+            transform: scale($scale_end) rotate($rotation);
+            color: $color_end;
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+// ============================================================================
+// move.gl | Wave Keyframes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Wave Keyframes Module
+/// ===========================================================================
+///
+/// Provides parameterized keyframe mixins for wave animations.
+/// Rotates elements in a friendly waving pattern.
+///
+/// @group Keyframes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+
+///
+/// Wave Keyframes
+/// @name keyframes_animate_wave
+/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave.
+///
+@mixin keyframes_animate_wave($angle: $animate_angle_wave) {
+    @keyframes animate_wave {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Wave Slow Keyframes
+/// @name keyframes_animate_wave_slow
+/// @param {Angle} $angle [10deg] - The maximum rotation angle.
+///
+@mixin keyframes_animate_wave_slow($angle: $animate_angle_wave_slow) {
+    @keyframes animate_wave_slow {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Wave Fast Keyframes
+/// @name keyframes_animate_wave_fast
+/// @param {Angle} $angle [30deg] - The maximum rotation angle.
+///
+@mixin keyframes_animate_wave_fast($angle: $animate_angle_wave_fast) {
+    @keyframes animate_wave_fast {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate($angle); }
+    }
+}
+
+
+///
+/// Wave Fade Keyframes
+/// @name keyframes_animate_wave_fade
+/// @param {Angle} $angle [20deg] - The maximum rotation angle.
+///
+@mixin keyframes_animate_wave_fade($angle: $animate_angle_wave) {
+    @keyframes animate_wave_fade {
+        0%, 100% {
+            transform: rotate(0deg);
+            opacity: 1;
+        }
+        50% {
+            transform: rotate($angle);
+            opacity: 0.5;
+        }
+    }
+}

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

@@ -0,0 +1,293 @@
+////
+///
+/// Wobble Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for wobble animations including basic wobble, speed
+/// variations, and wobble with scale. These keyframes create unsteady
+/// oscillating effects for playful interactions.
+///
+/// @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 Wobble Keyframes
+// ============================================================================
+
+///
+/// Standard wobble effect.
+///
+/// @param {Angle} $angle [$animate_angle_wobble] - Maximum wobble angle
+///
+@mixin keyframes_wobble($angle: $animate_angle_wobble) {
+    @include keyframes(animate_wobble) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(-$angle);
+        }
+        50% {
+            transform: rotate($angle);
+        }
+        75% {
+            transform: rotate(-$angle);
+        }
+    }
+}
+
+///
+/// Wobble with CSS custom property support.
+///
+@mixin keyframes_animate_wobble($angle: $animate_angle_wobble) {
+    @include keyframes(animate_wobble) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(calc(-1 * var(--animate-wobble-angle, #{$angle})));
+        }
+        50% {
+            transform: rotate(var(--animate-wobble-angle, #{$angle}));
+        }
+        75% {
+            transform: rotate(calc(-1 * var(--animate-wobble-angle, #{$angle})));
+        }
+    }
+}
+
+
+// ============================================================================
+// Slow Wobble Keyframes
+// ============================================================================
+
+///
+/// Gentler, slower wobble.
+///
+/// @param {Angle} $angle [3deg] - Maximum wobble angle
+///
+@mixin keyframes_wobble_slow($angle: $animate_angle_wobble_slow) {
+    @include keyframes(animate_wobble_slow) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(-$angle);
+        }
+        50% {
+            transform: rotate($angle);
+        }
+        75% {
+            transform: rotate(-$angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Fast Wobble Keyframes
+// ============================================================================
+
+///
+/// Faster, more intense wobble.
+///
+/// @param {Angle} $angle [10deg] - Maximum wobble angle
+///
+@mixin keyframes_wobble_fast($angle: $animate_angle_wobble_fast) {
+    @include keyframes(animate_wobble_fast) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        25% {
+            transform: rotate(-$angle);
+        }
+        50% {
+            transform: rotate($angle);
+        }
+        75% {
+            transform: rotate(-$angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Wobble with Scale Keyframes
+// ============================================================================
+
+///
+/// Wobble combined with scale effect.
+///
+/// @param {Angle} $angle [5deg] - Wobble angle
+/// @param {Number} $scale [1.1] - Scale factor
+///
+@mixin keyframes_wobble_scale($angle: $animate_angle_gentle, $scale: $animate_scale_bounce) {
+    @include keyframes(animate_wobble_scale) {
+        0%, 100% {
+            transform: scale(1) rotate(0deg);
+        }
+        25% {
+            transform: scale($scale) rotate(-$angle);
+        }
+        50% {
+            transform: scale($scale) rotate($angle);
+        }
+        75% {
+            transform: scale($scale) rotate(-$angle);
+        }
+    }
+}
+
+
+// ============================================================================
+// Advanced Wobble Keyframes (from Animate.css)
+// ============================================================================
+
+///
+/// Complex wobble with translation (Animate.css style).
+///
+@mixin keyframes_wobble_advanced() {
+    @include keyframes(animate_wobble_advanced) {
+        from {
+            transform: none;
+        }
+        15% {
+            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+        }
+        30% {
+            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+        }
+        45% {
+            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+        }
+        60% {
+            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+        }
+        75% {
+            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+        }
+        to {
+            transform: none;
+        }
+    }
+}
+
+
+// ============================================================================
+// Horizontal Wobble Keyframes
+// ============================================================================
+
+///
+/// Horizontal wobble (translateX).
+///
+/// @param {Length} $distance [5%] - Maximum horizontal distance
+///
+@mixin keyframes_wobble_horizontal($distance: $animate_wobble_distance) {
+    @include keyframes(animate_wobble_horizontal) {
+        0%, 100% {
+            transform: translateX(0);
+        }
+        25% {
+            transform: translateX(-$distance);
+        }
+        50% {
+            transform: translateX($distance);
+        }
+        75% {
+            transform: translateX(-$distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Vertical Wobble Keyframes
+// ============================================================================
+
+///
+/// Vertical wobble (translateY).
+///
+/// @param {Length} $distance [5%] - Maximum vertical distance
+///
+@mixin keyframes_wobble_vertical($distance: $animate_wobble_distance) {
+    @include keyframes(animate_wobble_vertical) {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        25% {
+            transform: translateY(-$distance);
+        }
+        50% {
+            transform: translateY($distance);
+        }
+        75% {
+            transform: translateY(-$distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Skew Wobble Keyframes
+// ============================================================================
+
+///
+/// Wobble with skew effect.
+///
+/// @param {Angle} $skew [5deg] - Maximum skew angle
+///
+@mixin keyframes_wobble_skew($skew: $animate_angle_wobble_skew) {
+    @include keyframes(animate_wobble_skew) {
+        0%, 100% {
+            transform: skewX(0deg);
+        }
+        25% {
+            transform: skewX(-$skew);
+        }
+        50% {
+            transform: skewX($skew);
+        }
+        75% {
+            transform: skewX(-$skew);
+        }
+    }
+}
+
+
+// ============================================================================
+// Pendulum Wobble Keyframes
+// ============================================================================
+
+///
+/// Pendulum-style wobble from top origin.
+///
+/// @param {Angle} $angle [10deg] - Maximum swing angle
+///
+@mixin keyframes_wobble_pendulum($angle: $animate_angle_wobble_pendulum) {
+    @include keyframes(animate_wobble_pendulum) {
+        0%, 100% {
+            transform: rotate(0deg);
+            transform-origin: top center;
+        }
+        25% {
+            transform: rotate($angle);
+        }
+        75% {
+            transform: rotate(-$angle);
+        }
+    }
+}