move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/keyframes/animations/_scale.scss

@@ -0,0 +1,308 @@
+////
+///
+/// Scale Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for scale animations including expand, shrink, scale
+/// in/out effects. These keyframes provide size-based animations for
+/// emphasis, feedback, and transition 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 Scale Keyframes
+// ============================================================================
+
+///
+/// Standard scale animation.
+///
+/// @param {Number} $scale_start [1] - Starting scale
+/// @param {Number} $scale_end [1.2] - Ending/midpoint scale
+///
+@mixin keyframes_scale($scale_start: 1, $scale_end: $animate_scale_pop) {
+    @include keyframes(animate_scale) {
+        0%, 100% {
+            transform: scale($scale_start);
+        }
+        50% {
+            transform: scale($scale_end);
+        }
+    }
+}
+
+///
+/// Scale with CSS custom property support.
+///
+@mixin keyframes_animate_scale($scale: $animate_scale_pop) {
+    @include keyframes(animate_scale) {
+        0%, 100% {
+            transform: scale(var(--animate-scale-base, #{$animate_scale_base}));
+        }
+        50% {
+            transform: scale(var(--animate-scale-end, #{$scale}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Expand Keyframes
+// ============================================================================
+
+///
+/// Expand animation.
+///
+/// @param {Number} $scale_start [1] - Starting scale
+/// @param {Number} $scale_end [1.2] - Maximum scale
+///
+@mixin keyframes_scale_expand($scale_start: 1, $scale_end: $animate_scale_pop) {
+    @include keyframes(animate_scale_expand) {
+        0%, 100% {
+            transform: scale($scale_start);
+        }
+        50% {
+            transform: scale($scale_end);
+        }
+    }
+}
+
+
+// ============================================================================
+// Shrink Keyframes
+// ============================================================================
+
+///
+/// Shrink animation.
+///
+/// @param {Number} $scale_min [0.8] - Minimum scale
+/// @param {Number} $scale_max [1.2] - Maximum scale
+///
+@mixin keyframes_scale_shrink($scale_min: $animate_scale_shrink_min, $scale_max: $animate_scale_pop) {
+    @include keyframes(animate_scale_shrink) {
+        0% {
+            transform: scale($scale_max);
+        }
+        50% {
+            transform: scale($scale_min);
+        }
+        100% {
+            transform: scale($scale_max);
+        }
+    }
+}
+
+
+// ============================================================================
+// Scale In Keyframes
+// ============================================================================
+
+///
+/// Scale in from small.
+///
+/// @param {Number} $start_scale [0] - Starting scale
+///
+@mixin keyframes_scale_in($start_scale: 0) {
+    @include keyframes(animate_scale_in) {
+        from {
+            transform: scale($start_scale);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Scale in from center.
+///
+/// @param {Number} $start_scale [0.5] - Starting scale
+///
+@mixin keyframes_scale_in_center($start_scale: $animate_scale_in_center) {
+    @include keyframes(animate_scale_in_center) {
+        from {
+            transform: scale($start_scale);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}
+
+///
+/// Scale in with overshoot (pop effect).
+///
+/// @param {Number} $start_scale [0] - Starting scale
+/// @param {Number} $overshoot [1.1] - Overshoot scale
+///
+@mixin keyframes_scale_in_pop($start_scale: 0, $overshoot: $animate_scale_overshoot) {
+    @include keyframes(animate_scale_in_pop) {
+        0% {
+            transform: scale($start_scale);
+            opacity: 0;
+        }
+        70% {
+            transform: scale($overshoot);
+            opacity: 1;
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+}
+
+
+// ============================================================================
+// Scale Out Keyframes
+// ============================================================================
+
+///
+/// Scale out to nothing.
+///
+/// @param {Number} $end_scale [0] - Ending scale
+///
+@mixin keyframes_scale_out($end_scale: 0) {
+    @include keyframes(animate_scale_out) {
+        from {
+            transform: scale(1);
+            opacity: 1;
+        }
+        to {
+            transform: scale($end_scale);
+            opacity: 0;
+        }
+    }
+}
+
+///
+/// Scale out from center.
+///
+/// @param {Number} $end_scale [0.5] - Ending scale
+///
+@mixin keyframes_scale_out_center($end_scale: $animate_scale_in_center) {
+    @include keyframes(animate_scale_out_center) {
+        from {
+            transform: scale(1);
+            opacity: 1;
+        }
+        to {
+            transform: scale($end_scale);
+            opacity: 0;
+        }
+    }
+}
+
+
+// ============================================================================
+// Bounce Scale Keyframes
+// ============================================================================
+
+///
+/// Scale with bounce effect.
+///
+/// @param {Number} $scale [1.2] - Target scale
+///
+@mixin keyframes_scale_bounce($scale: $animate_scale_pop) {
+    @include keyframes(animate_scale_bounce) {
+        0%, 100% {
+            transform: scale(1);
+        }
+        30% {
+            transform: scale($scale);
+        }
+        50% {
+            transform: scale($scale * 0.9);
+        }
+        70% {
+            transform: scale($scale * 0.95);
+        }
+    }
+}
+
+
+// ============================================================================
+// Scale X/Y Keyframes
+// ============================================================================
+
+///
+/// Scale on X-axis only.
+///
+/// @param {Number} $scale_x [1.2] - X-axis scale
+///
+@mixin keyframes_scale_x($scale_x: $animate_scale_pop) {
+    @include keyframes(animate_scale_x) {
+        0%, 100% {
+            transform: scaleX(1);
+        }
+        50% {
+            transform: scaleX($scale_x);
+        }
+    }
+}
+
+///
+/// Scale on Y-axis only.
+///
+/// @param {Number} $scale_y [1.2] - Y-axis scale
+///
+@mixin keyframes_scale_y($scale_y: $animate_scale_pop) {
+    @include keyframes(animate_scale_y) {
+        0%, 100% {
+            transform: scaleY(1);
+        }
+        50% {
+            transform: scaleY($scale_y);
+        }
+    }
+}
+
+
+// ============================================================================
+// Scale Transition Classes (CSS utility classes)
+// ============================================================================
+
+///
+/// Keyframes for scale-in transition class.
+///
+@mixin keyframes_scale_transition_in() {
+    @include keyframes(scale_transition_in) {
+        from {
+            transform: scale(0);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+}
+
+///
+/// Keyframes for scale-out transition class.
+///
+@mixin keyframes_scale_transition_out() {
+    @include keyframes(scale_transition_out) {
+        from {
+            transform: scale(1);
+        }
+        to {
+            transform: scale(0);
+        }
+    }
+}

package/src/scss/mixins/keyframes/animations/_shake.scss

@@ -0,0 +1,270 @@
+////
+///
+/// Shake Keyframes Mixins Module
+/// ===========================================================================
+///
+/// Defines keyframes for shake animations including rotational shake,
+/// horizontal/vertical shake, and intense shake variations. These keyframes
+/// create attention-grabbing oscillating 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 Shake Keyframes
+// ============================================================================
+
+///
+/// Standard rotational shake.
+///
+/// @param {Angle} $amplitude [$animate_angle_shake] - Maximum rotation angle
+///
+@mixin keyframes_shake($amplitude: $animate_angle_shake) {
+    @include keyframes(animate_shake) {
+        0% {
+            transform: rotate(-$amplitude);
+        }
+        4% {
+            transform: rotate($amplitude);
+        }
+        8%, 24% {
+            transform: rotate(-$amplitude * 1.2);
+        }
+        12%, 28% {
+            transform: rotate($amplitude * 1.2);
+        }
+        16% {
+            transform: rotate(-$amplitude * 1.4);
+        }
+        20% {
+            transform: rotate($amplitude * 1.4);
+        }
+        32% {
+            transform: rotate(-$amplitude * 0.8);
+        }
+        36% {
+            transform: rotate($amplitude * 0.8);
+        }
+        40%, 100% {
+            transform: rotate(0deg);
+        }
+    }
+}
+
+///
+/// Shake with CSS custom property support.
+///
+@mixin keyframes_animate_shake($amplitude: $animate_angle_shake) {
+    @include keyframes(animate_shake) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        10%, 30%, 50%, 70%, 90% {
+            transform: rotate(calc(-1 * var(--animate-shake-angle, #{$amplitude})));
+        }
+        20%, 40%, 60%, 80% {
+            transform: rotate(var(--animate-shake-angle, #{$amplitude}));
+        }
+    }
+}
+
+
+// ============================================================================
+// Slow Shake Keyframes
+// ============================================================================
+
+///
+/// Gentler, slower shake.
+///
+/// @param {Angle} $amplitude [$animate_angle_gentle] - Maximum rotation angle
+///
+@mixin keyframes_shake_slow($amplitude: $animate_angle_gentle) {
+    @include keyframes(animate_shake_slow) {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        10%, 30%, 50%, 70%, 90% {
+            transform: rotate(-$amplitude);
+        }
+        20%, 40%, 60%, 80% {
+            transform: rotate($amplitude);
+        }
+    }
+}
+
+
+// ============================================================================
+// Horizontal Shake Keyframes
+// ============================================================================
+
+///
+/// Horizontal shake (translateX).
+///
+/// @param {Length} $distance [$animate_translate_shake] - Horizontal distance
+///
+@mixin keyframes_shake_horizontal($distance: $animate_translate_shake) {
+    @include keyframes(animate_shake_horizontal) {
+        0%, 100% {
+            transform: translateX(0);
+        }
+        10%, 30%, 50%, 70%, 90% {
+            transform: translateX(-$distance);
+        }
+        20%, 40%, 60%, 80% {
+            transform: translateX($distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Vertical Shake Keyframes
+// ============================================================================
+
+///
+/// Vertical shake (translateY).
+///
+/// @param {Length} $distance [$animate_translate_shake] - Vertical distance
+///
+@mixin keyframes_shake_vertical($distance: $animate_translate_shake) {
+    @include keyframes(animate_shake_vertical) {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        10%, 30%, 50%, 70%, 90% {
+            transform: translateY(-$distance);
+        }
+        20%, 40%, 60%, 80% {
+            transform: translateY($distance);
+        }
+    }
+}
+
+
+// ============================================================================
+// Intense Shake Keyframes
+// ============================================================================
+
+///
+/// Intense shake with rotation and translation.
+///
+/// @param {Angle} $amplitude [$animate_angle_rapid] - Maximum rotation angle
+/// @param {Length} $distance [5px] - Translation distance
+///
+@mixin keyframes_shake_intense($amplitude: $animate_angle_rapid, $distance: 5px) {
+    @include keyframes(animate_shake_intense) {
+        0%, 100% {
+            transform: translateX(0) rotate(0);
+        }
+        10% {
+            transform: translateX(-$distance) rotate(-$amplitude);
+        }
+        20% {
+            transform: translateX($distance) rotate($amplitude);
+        }
+        30% {
+            transform: translateX(-$distance * 0.8) rotate(-$amplitude * 0.8);
+        }
+        40% {
+            transform: translateX($distance * 0.8) rotate($amplitude * 0.8);
+        }
+        50% {
+            transform: translateX(-$distance * 0.6) rotate(-$amplitude * 0.6);
+        }
+        60% {
+            transform: translateX($distance * 0.6) rotate($amplitude * 0.6);
+        }
+        70% {
+            transform: translateX(-$distance * 0.4) rotate(-$amplitude * 0.4);
+        }
+        80% {
+            transform: translateX($distance * 0.4) rotate($amplitude * 0.4);
+        }
+        90% {
+            transform: translateX(-$distance * 0.2) rotate(-$amplitude * 0.2);
+        }
+    }
+}
+
+
+// ============================================================================
+// Jitter Shake Keyframes
+// ============================================================================
+
+///
+/// Random-like jitter shake.
+///
+/// @param {Length} $distance [2px] - Maximum jitter distance
+///
+@mixin keyframes_shake_jitter($distance: 2px) {
+    @include keyframes(animate_shake_jitter) {
+        0%, 100% {
+            transform: translate(0, 0);
+        }
+        10% {
+            transform: translate(-$distance, $distance);
+        }
+        20% {
+            transform: translate($distance, -$distance);
+        }
+        30% {
+            transform: translate(-$distance * 0.5, -$distance);
+        }
+        40% {
+            transform: translate($distance, $distance * 0.5);
+        }
+        50% {
+            transform: translate(-$distance, $distance * 0.5);
+        }
+        60% {
+            transform: translate($distance * 0.5, -$distance);
+        }
+        70% {
+            transform: translate(-$distance * 0.5, $distance);
+        }
+        80% {
+            transform: translate($distance, -$distance * 0.5);
+        }
+        90% {
+            transform: translate(-$distance, -$distance * 0.5);
+        }
+    }
+}
+
+
+// ============================================================================
+// Nod Shake Keyframes
+// ============================================================================
+
+///
+/// Nodding shake (up and down motion).
+///
+/// @param {Angle} $angle [5deg] - Rotation angle
+///
+@mixin keyframes_shake_nod($angle: 5deg) {
+    @include keyframes(animate_shake_nod) {
+        0%, 100% {
+            transform: rotateX(0deg);
+        }
+        25% {
+            transform: rotateX($angle);
+        }
+        75% {
+            transform: rotateX(-$angle);
+        }
+    }
+}