move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_wave.scss

@@ -0,0 +1,149 @@
+////
+///
+/// Wave Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides waving animations for greeting effects and flag-like motion.
+/// Rotates elements in a friendly waving pattern. Ideal for hand-wave
+/// icons, greetings, and goodbye animations.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Wave Animation
+/// ---------------------------------------------------------------------------
+/// Creates a wave effect by rotating an element back and forth.
+///
+/// @name animate_wave
+/// @param {Angle} $angle [20deg] - Maximum rotation angle during the wave
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .hand-wave {
+///     @include animate_wave;
+///   }
+///
+@mixin animate_wave(
+    $angle: 20deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_wave($angle);
+}
+
+
+// Gentle Wave Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Wave Animation
+/// A slower and subtler wave animation.
+/// @name animate_wave_slow
+/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wave.
+/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_wave_slow(
+    $angle: 10deg,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_wave_slow($angle);
+}
+
+
+
+// Rapid Wave Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Wave Animation
+/// A faster and more intense wave animation.
+/// @name animate_wave_fast
+/// @param {Angle} $angle [30deg] - The maximum rotation angle during the wave.
+/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_wave_fast(
+    $angle: 30deg,
+    $duration: $animate_base_duration_fast,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_wave_fast($angle);
+}
+
+
+
+// Wave with Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Wave with Fade Animation
+/// A wave animation combined with a fading effect.
+/// @name animate_wave_fade
+/// @param {Angle} $angle [20deg] - The maximum rotation angle during the wave.
+/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_wave_fade(
+    $angle: 20deg,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wave_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_wave_fade($angle);
+}

package/src/scss/mixins/animations/_wobble.scss

@@ -0,0 +1,283 @@
+////
+///
+/// Wobble Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides unsteady wobbling animations that alternate rotation direction.
+/// Includes gentle, rapid, and horizontal variants. Perfect for error states,
+/// attention seekers, and playful feedback animations.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../dev" as *;
+@use "../../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Creates a wobble effect by rotating an element back and forth.
+///
+/// @name animate_wobble
+/// @param {Angle} $angle [$animate_angle_wobble] - The maximum rotation angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+/// @example scss - Basic usage
+///   .element {
+///     @include animate_wobble;
+///   }
+///
+@mixin animate_wobble(
+    $angle: $animate_angle_wobble,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble($angle);
+}
+
+
+///
+/// Gentle Wobble Animation
+/// ---------------------------------------------------------------------------
+/// A slower and subtler wobble animation.
+///
+/// @name animate_wobble_slow
+/// @param {Angle} $angle [$animate_angle_wobble_slow] - Maximum rotation angle.
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_slow(
+    $angle: $animate_angle_wobble_slow,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_slow($angle);
+}
+
+
+///
+/// Rapid Wobble Animation
+/// ---------------------------------------------------------------------------
+/// A faster and more intense wobble animation.
+///
+/// @name animate_wobble_fast
+/// @param {Angle} $angle [$animate_angle_wobble_fast] - Maximum rotation angle.
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_fast(
+    $angle: $animate_angle_wobble_fast,
+    $duration: $animate_base_duration_fast,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_fast,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_fast($angle);
+}
+
+
+///
+/// Wobble with Scale Animation
+/// ---------------------------------------------------------------------------
+/// A wobble animation combined with a scaling effect.
+///
+/// @name animate_wobble_scale
+/// @param {Angle} $angle [$animate_angle_wobble] - Maximum rotation angle.
+/// @param {Number} $scale [1.1] - Scale factor during wobble.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_scale(
+    $angle: $animate_angle_wobble,
+    $scale: 1.1,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_scale,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_scale($angle, $scale);
+}
+
+
+///
+/// Advanced Wobble Animation (Animate.css style)
+/// ---------------------------------------------------------------------------
+/// Complex wobble with translation, similar to Animate.css wobble.
+///
+/// @name animate_wobble_advanced
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+/// @example scss - Usage
+///   .attention-element {
+///     @include animate_wobble_advanced;
+///   }
+///
+@mixin animate_wobble_advanced(
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_advanced,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_advanced();
+}
+
+
+///
+/// Horizontal Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Wobble animation using horizontal translation.
+///
+/// @name animate_wobble_horizontal
+/// @param {Length} $distance [5%] - Maximum horizontal distance.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_horizontal(
+    $distance: 5%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_horizontal,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_horizontal($distance);
+}
+
+
+///
+/// Vertical Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Wobble animation using vertical translation.
+///
+/// @name animate_wobble_vertical
+/// @param {Length} $distance [5%] - Maximum vertical distance.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_vertical(
+    $distance: 5%,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_vertical,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_vertical($distance);
+}
+
+
+///
+/// Skew Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Wobble animation using skew transformation.
+///
+/// @name animate_wobble_skew
+/// @param {Angle} $skew [5deg] - Maximum skew angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_skew(
+    $skew: 5deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_skew,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_skew($skew);
+}
+
+
+///
+/// Pendulum Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Pendulum-style wobble from top origin.
+///
+/// @name animate_wobble_pendulum
+/// @param {Angle} $angle [10deg] - Maximum swing angle.
+/// @param {Time} $duration [$animate_base_duration] - Animation duration.
+/// @param {String} $timing_function [$animate_base_timing_function] - Timing function.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations.
+///
+@mixin animate_wobble_pendulum(
+    $angle: 10deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_wobble_pendulum,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_wobble_pendulum($angle);
+}