move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_spin.scss

@@ -0,0 +1,322 @@
+////
+///
+/// Spin Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating rotation animations. Includes basic spin,
+/// reverse spin, spin with scaling effects, pulsing spin, and spin with flip
+/// for various visual effects.
+///
+/// @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
+// ============================================================================
+
+///
+/// Spin Animation
+/// ---------------------------------------------------------------------------
+/// Creates a continuous rotation animation.
+///
+/// @name animate_spin
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .loader {
+///     @include animate_spin;
+///   }
+///
+/// @example scss - Slower spin
+///   .slow-spinner {
+///     @include animate_spin($duration: 3s);
+///   }
+///
+@mixin animate_spin(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin($start_angle, $end_angle);
+}
+
+
+///
+/// Spin Reverse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a counter-clockwise rotation animation.
+///
+/// @name animate_spin_reverse
+/// @param {Angle} $start_angle [360deg] - Starting rotation angle
+/// @param {Angle} $end_angle [0deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_reverse(
+    $start_angle: 360deg,
+    $end_angle: 0deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_reverse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_reverse($start_angle, $end_angle);
+}
+
+
+///
+/// Spin and Grow Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with scaling for a dynamic effect.
+///
+/// @name animate_spin_grow
+/// @param {Number} $scale [1.2] - Maximum scale during rotation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_grow(
+    $scale: 1.2,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_grow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_grow($scale);
+}
+
+
+///
+/// Spin and Shrink Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with shrinking for a dynamic effect.
+///
+/// @name animate_spin_shrink
+/// @param {Number} $scale [0.8] - Minimum scale during rotation
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_shrink(
+    $scale: 0.8,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_shrink,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_shrink($scale);
+}
+
+
+///
+/// Spin Pulse Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation with pulsing scale for a rhythmic effect.
+///
+/// @name animate_spin_pulse
+/// @param {Number} $scale_min [1] - Minimum scale
+/// @param {Number} $scale_max [1.1] - Maximum scale
+/// @param {Angle} $rotation_angle [360deg] - Full rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_pulse(
+    $scale_min: 1,
+    $scale_max: 1.1,
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_pulse,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_pulse($scale_min, $scale_max, $rotation_angle);
+}
+
+
+///
+/// Spin and Flip Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation combined with a 3D flip effect.
+///
+/// @name animate_spin_flip
+/// @param {Angle} $rotation_angle [360deg] - Rotation angle
+/// @param {Angle} $flip_angle [180deg] - 3D flip angle on Y-axis
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_flip(
+    $rotation_angle: 360deg,
+    $flip_angle: 180deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_flip,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_flip($rotation_angle, $flip_angle);
+}
+
+
+///
+/// Spin Wobble Animation
+/// ---------------------------------------------------------------------------
+/// Creates a spinning animation with a slight wobble effect.
+///
+/// @name animate_spin_wobble
+/// @param {Angle} $wobble_angle [5deg] - Wobble tilt angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_wobble(
+    $wobble_angle: 5deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_wobble,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_wobble($wobble_angle);
+}
+
+
+///
+/// Spin Loader Animation
+/// ---------------------------------------------------------------------------
+/// Creates a loader-style spinning animation (full 360 degree rotation).
+///
+/// @name animate_spin_loader
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_loader(
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_loader,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_loader();
+}
+
+
+///
+/// Spin X Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rotation around the X-axis (horizontal flip).
+///
+/// @name animate_spin_x
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_x(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_x,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_x($start_angle, $end_angle);
+}
+
+
+///
+/// Spin Y Animation
+/// ---------------------------------------------------------------------------
+/// Creates a rotation around the Y-axis (vertical flip).
+///
+/// @name animate_spin_y
+/// @param {Angle} $start_angle [0deg] - Starting rotation angle
+/// @param {Angle} $end_angle [360deg] - Ending rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [linear] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_spin_y(
+    $start_angle: 0deg,
+    $end_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_spin_y,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_spin_y($start_angle, $end_angle);
+}

package/src/scss/mixins/animations/_sway.scss

@@ -0,0 +1,150 @@
+////
+///
+/// Sway Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides gentle swaying animations that simulate wind or pendulum motion.
+/// Includes variants for different speeds and depths. Ideal for trees,
+/// flags, hanging objects, and relaxed ambient effects.
+///
+/// @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
+// ============================================================================
+
+
+///
+/// Sway Animation
+/// ---------------------------------------------------------------------------
+/// Creates a swaying motion animation.
+///
+/// @name animate_sway
+/// @param {Angle} $angle [5deg] - Maximum angle to sway
+/// @param {Time} $duration - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count - Number of iterations
+///
+/// @example scss - Basic usage
+///   .tree {
+///     @include animate_sway;
+///   }
+///
+@mixin animate_sway(
+    $angle: 5deg,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_sway($angle);
+}
+
+
+
+// Gentle Sway Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Gentle Sway Animation
+/// Creates a slower, more subtle swaying motion.
+/// @name animate_sway_slow
+/// @param {Angle} $angle [3deg] - The maximum angle to sway.
+/// @param {Duration} $duration [$animate_base_duration_slow/// 2] - The duration of the sway animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_sway_slow(
+    $angle: 3deg,
+    $duration: $animate_base_duration_slow * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_slow,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_sway_slow($angle);
+}
+
+
+
+// Rapid Sway Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Rapid Sway Animation
+/// Creates a faster and more exaggerated swaying motion.
+/// @name animate_sway_fast
+/// @param {Angle} $angle [10deg] - The maximum angle to sway.
+/// @param {Duration} $duration [$animate_base_duration_fast/// 2] - The duration of the sway animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_sway_fast(
+    $angle: 10deg,
+    $duration: $animate_base_duration_fast * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_fast,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_sway_fast($angle);
+}
+
+
+
+// Sway with Fade Animation
+// ----------------------------------------------------------------------------
+
+///
+/// Sway with Fade Animation
+/// Creates a swaying motion with a fading effect.
+/// @name animate_sway_fade
+/// @param {Angle} $angle [5deg] - The maximum angle to sway.
+/// @param {Duration} $duration [$animate_base_duration/// 2] - The duration of the sway animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the sway animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_sway_fade(
+    $angle: 5deg,
+    $duration: $animate_base_duration * 2,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_sway_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_sway_fade($angle);
+}