move.gl 0.0.1 → 0.0.2

package/dist/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);
+}

package/dist/scss/mixins/animations/_zoom.scss

@@ -0,0 +1,394 @@
+////
+///
+/// Zoom Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating zoom animations that scale elements in
+/// and out. Includes standard zoom, speed variations, and combined zoom
+/// effects with fade and rotation.
+///
+/// @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
+// ============================================================================
+
+///
+/// Zoom Animation
+/// ---------------------------------------------------------------------------
+/// Creates a zoom effect by scaling an element up and down.
+///
+/// @name animate_zoom
+/// @param {Number} $scale [$animate_scale_zoom] - Scale factor at animation peak
+/// @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
+///
+/// @example scss - Basic usage
+///   .image {
+///     @include animate_zoom;
+///   }
+///
+@mixin animate_zoom(
+    $scale: $animate_scale_zoom,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom($scale);
+}
+
+
+///
+/// Gentle Zoom Animation
+/// ---------------------------------------------------------------------------
+/// A slower, more subtle zoom effect.
+///
+/// @name animate_zoom_slow
+/// @param {Number} $scale [$animate_scale_zoom_slow] - Scale factor at animation peak
+/// @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_zoom_slow(
+    $scale: $animate_scale_zoom_slow,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_slow($scale);
+}
+
+
+///
+/// Rapid Zoom Animation
+/// ---------------------------------------------------------------------------
+/// A faster, more intense zoom effect.
+///
+/// @name animate_zoom_fast
+/// @param {Number} $scale [$animate_scale_zoom_fast] - Scale factor at animation peak
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_zoom_fast(
+    $scale: $animate_scale_zoom_fast,
+    $duration: $animate_base_duration_fast,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_fast,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_fast($scale);
+}
+
+
+///
+/// Zoom with Fade Animation
+/// ---------------------------------------------------------------------------
+/// Combines zoom with a fade effect for a breathing appearance.
+///
+/// @name animate_zoom_fade
+/// @param {Number} $scale [1.5] - Scale factor at animation peak
+/// @param {Number} $opacity_min [0.5] - Minimum opacity
+/// @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_zoom_fade(
+    $scale: 1.5,
+    $opacity_min: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_fade,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_fade($scale, $opacity_min);
+}
+
+
+///
+/// Zoom In Animation
+/// ---------------------------------------------------------------------------
+/// Creates an entrance animation that zooms an element in from scaled down.
+///
+/// @name animate_zoom_in
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in(
+    $start_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in($start_scale);
+}
+
+
+///
+/// Zoom Out Animation
+/// ---------------------------------------------------------------------------
+/// Creates an exit animation that zooms an element out.
+///
+/// @name animate_zoom_out
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out(
+    $end_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_out($end_scale);
+}
+
+
+///
+/// Zoom with Rotate Animation
+/// ---------------------------------------------------------------------------
+/// Combines zoom with rotation for a dynamic effect.
+///
+/// @name animate_zoom_rotate
+/// @param {Number} $scale [1.5] - Scale factor at animation peak
+/// @param {Angle} $rotation [15deg] - Rotation angle
+/// @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_zoom_rotate(
+    $scale: 1.5,
+    $rotation: 15deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_rotate,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_rotate($scale, $rotation);
+}
+
+
+///
+/// Zoom In Up Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from below the element's position.
+///
+/// @name animate_zoom_in_up
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_up(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_up($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Down Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from above the element's position.
+///
+/// @name animate_zoom_in_down
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_down(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_down($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Left Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from the left of the element's position.
+///
+/// @name animate_zoom_in_left
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_left(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_left($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Right Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from the right of the element's position.
+///
+/// @name animate_zoom_in_right
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_right(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_right($start_scale, $distance);
+}
+
+
+///
+/// Zoom Out Up Animation
+/// ---------------------------------------------------------------------------
+/// Zooms out while moving up.
+///
+/// @name animate_zoom_out_up
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out_up(
+    $end_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_zoom_out_up($end_scale, $distance);
+}
+
+
+///
+/// Zoom Out Down Animation
+/// ---------------------------------------------------------------------------
+/// Zooms out while moving down.
+///
+/// @name animate_zoom_out_down
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out_down(
+    $end_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_zoom_out_down($end_scale, $distance);
+}