move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_shake.scss

@@ -0,0 +1,233 @@
+////
+///
+/// Shake Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating shake animations that oscillate elements
+/// with various amplitudes and directions. Ideal for drawing attention,
+/// indicating errors, or creating playful interactions.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:math";
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a shake animation with configurable amplitude for attention-grabbing
+/// effects.
+///
+/// @name animate_shake
+/// @param {Angle} $amplitude [$animate_angle_shake] - Maximum rotation angle
+/// @param {Time} $duration [0.5s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .error-field {
+///     @include animate_shake;
+///   }
+///
+@mixin animate_shake(
+    $amplitude: $animate_angle_shake,
+    $duration: 0.5s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake($amplitude);
+}
+
+
+///
+/// Gentle Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a slower, gentler shake for subtle attention without being jarring.
+///
+/// @name animate_shake_slow
+/// @param {Angle} $amplitude [$animate_angle_gentle] - Maximum rotation angle
+/// @param {Time} $duration [1s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_shake_slow(
+    $amplitude: $animate_angle_gentle,
+    $duration: 1s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_slow($amplitude);
+}
+
+
+///
+/// Horizontal Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a shake that moves the element horizontally, great for error states.
+///
+/// @name animate_shake_horizontal
+/// @param {Length} $distance [$animate_translate_shake] - Horizontal distance
+/// @param {Time} $duration [0.5s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Error shake
+///   .invalid-input {
+///     @include animate_shake_horizontal(15px, 0.4s, ease-in-out, 1);
+///   }
+///
+@mixin animate_shake_horizontal(
+    $distance: $animate_translate_shake,
+    $duration: 0.5s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_horizontal,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_horizontal($distance);
+}
+
+
+///
+/// Vertical Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a shake that moves the element vertically.
+///
+/// @name animate_shake_vertical
+/// @param {Length} $distance [$animate_translate_shake] - Vertical distance
+/// @param {Time} $duration [0.5s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_shake_vertical(
+    $distance: $animate_translate_shake,
+    $duration: 0.5s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_vertical($distance);
+}
+
+
+///
+/// Intense Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a more aggressive shake for important alerts or errors.
+///
+/// @name animate_shake_intense
+/// @param {Angle} $amplitude [$animate_angle_rapid] - Maximum rotation angle
+/// @param {Length} $distance [5px] - Additional translation distance
+/// @param {Time} $duration [0.4s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [1] - Iterations
+///
+@mixin animate_shake_intense(
+    $amplitude: $animate_angle_rapid,
+    $distance: 5px,
+    $duration: 0.4s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: 1
+) {
+    @include animate_base(
+        animate_shake_intense,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_intense($amplitude, $distance);
+}
+
+
+///
+/// Jitter Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rapid, random-feeling shake for nervous or excited states.
+///
+/// @name animate_shake_jitter
+/// @param {Length} $distance [3px] - Maximum jitter distance
+/// @param {Time} $duration [0.3s] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_shake_jitter(
+    $distance: 3px,
+    $duration: 0.3s,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_jitter,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_jitter($distance);
+}
+
+
+///
+/// Nod Shake Animation
+/// ---------------------------------------------------------------------------
+/// Creates a nodding shake motion (rotation around X-axis).
+///
+/// @name animate_shake_nod
+/// @param {Angle} $angle [10deg] - Maximum nod angle
+/// @param {Time} $duration [0.5s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_shake_nod(
+    $angle: 10deg,
+    $duration: 0.5s,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_shake_nod,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_shake_nod($angle);
+}