move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/animations/_fade.scss

@@ -0,0 +1,393 @@
+////
+///
+/// Fade Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating fade animations that control element
+/// opacity. Includes basic fade, fade-in, fade-out, and gradual fade
+/// variations for smooth visibility transitions.
+///
+/// @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
+// ============================================================================
+
+///
+/// Fade Animation
+/// ---------------------------------------------------------------------------
+/// Creates a looping fade animation that transitions between opacity values.
+///
+/// @name animate_fade
+/// @param {Number} $start_opacity [1] - Starting and ending opacity
+/// @param {Number} $mid_opacity [0] - Middle keyframe opacity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [cubic-bezier(0.4, 0, 0.6, 1)] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .element {
+///     @include animate_fade;
+///   }
+///
+@mixin animate_fade(
+    $start_opacity: 1,
+    $mid_opacity: 0,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function_fade,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_fade,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_fade($start_opacity, $mid_opacity);
+}
+
+
+///
+/// Fade In Animation
+/// ---------------------------------------------------------------------------
+/// Creates a one-time fade-in effect from transparent to opaque.
+///
+/// @name animate_fade_in
+/// @param {Number} $start_opacity [0] - Starting opacity
+/// @param {Number} $end_opacity [1] - Ending opacity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+/// @example scss - Usage
+///   .modal {
+///     @include animate_fade_in(0, 1, 0.3s);
+///   }
+///
+@mixin animate_fade_in(
+    $start_opacity: 0,
+    $end_opacity: 1,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_fade_in,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_in($start_opacity, $end_opacity);
+}
+
+
+///
+/// Fade Out Animation
+/// ---------------------------------------------------------------------------
+/// Creates a one-time fade-out effect from opaque to transparent.
+///
+/// @name animate_fade_out
+/// @param {Number} $start_opacity [1] - Starting opacity
+/// @param {Number} $end_opacity [0] - Ending opacity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+/// @example scss - Usage
+///   .closing-element {
+///     @include animate_fade_out;
+///   }
+///
+@mixin animate_fade_out(
+    $start_opacity: 1,
+    $end_opacity: 0,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_out,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_out($start_opacity, $end_opacity);
+}
+
+
+///
+/// Gradual Fade Animation
+/// ---------------------------------------------------------------------------
+/// Creates a subtle, slow fade animation for a gentle pulsing effect.
+///
+/// @name animate_fade_gradual
+/// @param {Number} $start_opacity [1] - Starting and ending opacity
+/// @param {Number} $end_opacity [0.5] - Midpoint opacity
+/// @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_fade_gradual(
+    $start_opacity: 1,
+    $end_opacity: 0.5,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_fade_gradual,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_fade_gradual($start_opacity, $end_opacity);
+}
+
+
+///
+/// Fade In Up Animation
+/// ---------------------------------------------------------------------------
+/// Fades element in while moving upward from below.
+///
+/// @name animate_fade_in_up
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_fade_in_up(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_fade_in_up($distance);
+}
+
+
+///
+/// Fade In Down Animation
+/// ---------------------------------------------------------------------------
+/// Fades element in while moving downward from above.
+///
+/// @name animate_fade_in_down
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_fade_in_down(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_fade_in_down($distance);
+}
+
+
+///
+/// Fade In Left Animation
+/// ---------------------------------------------------------------------------
+/// Fades element in while moving from left to right.
+///
+/// @name animate_fade_in_left
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_fade_in_left(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_fade_in_left($distance);
+}
+
+
+///
+/// Fade In Right Animation
+/// ---------------------------------------------------------------------------
+/// Fades element in while moving from right to left.
+///
+/// @name animate_fade_in_right
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_fade_in_right(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_fade_in_right($distance);
+}
+
+
+///
+/// Fade In with Scale Animation
+/// ---------------------------------------------------------------------------
+/// Fades element in while scaling up from a smaller size.
+///
+/// @name animate_fade_in_scale
+/// @param {Number} $start_scale [0.8] - Starting scale value
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_fade_in_scale(
+    $start_scale: 0.8,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in_scale,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_fade_in_scale($start_scale);
+}
+
+
+///
+/// Fade Out Up Animation
+/// ---------------------------------------------------------------------------
+/// Fades element out while moving upward.
+///
+/// @name animate_fade_out_up
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_fade_out_up(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_fade_out_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_out_up($distance);
+}
+
+
+///
+/// Fade Out Down Animation
+/// ---------------------------------------------------------------------------
+/// Fades element out while moving downward.
+///
+/// @name animate_fade_out_down
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_fade_out_down(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_fade_out_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_out_down($distance);
+}
+
+
+///
+/// Fade Out Left Animation
+/// ---------------------------------------------------------------------------
+/// Fades element out while moving to the left.
+///
+/// @name animate_fade_out_left
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_fade_out_left(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_fade_out_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_out_left($distance);
+}
+
+
+///
+/// Fade Out Right Animation
+/// ---------------------------------------------------------------------------
+/// Fades element out while moving to the right.
+///
+/// @name animate_fade_out_right
+/// @param {Length} $distance [20px] - Distance to move
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_fade_out_right(
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_fade_out_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_fade_out_right($distance);
+}

package/{scss → dist/scss}/mixins/animations/_flash.scss

@@ -1,22 +1,18 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
 ////
-/// 
+///
 /// Flash Animations Mixin Module
 /// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
+///
+/// Provides flashing and blinking animations for attention-grabbing effects.
+/// Includes standard flash, strobe, and fade variants with customizable
+/// opacity levels and timing. Useful for alerts, notifications, and warnings.
+///
 /// @group Animations
 /// @author Scape Agency
 /// @link https://move.gl
 /// @since 0.1.0 initial release
-/// @todo None
 /// @access public
-/// 
+///
 ////
 
 
@@ -24,8 +20,8 @@
 // Use
 // ============================================================================
 
-@use "../dev" as *;
-@use "../variables" as *;
+@use "../../dev" as *;
+@use "../../variables" as *;
 @use "../keyframes" as *;
 @use "base" as *;
 
@@ -37,16 +33,22 @@
 
 ///
 /// Flash Animation
+/// ---------------------------------------------------------------------------
 /// Creates a flash animation that transitions between different opacity
 /// levels.
-/// 
+///
 /// @name animate_flash
-/// @param {Number} $start_opacity [1] - The initial opacity of the element.
-/// @param {Number} $mid_opacity [0] - The opacity at the midpoint of the animation.
-/// @param {Number} $end_opacity [1] - The final opacity of the element.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of times the animation should run.
+/// @param {Number} $start_opacity [1] - Initial opacity of the element
+/// @param {Number} $mid_opacity [0] - Opacity at midpoint of animation
+/// @param {Number} $end_opacity [1] - Final opacity of the element
+/// @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
+///   .alert {
+///     @include animate_flash;
+///   }
 ///
 @mixin animate_flash(
     $start_opacity: 1,
@@ -63,19 +65,25 @@
         $iteration_count,
     );
     @keyframes animate_flash {
-        0%, 100% { opacity: $start-opacity; }
-        50% { opacity: $mid-opacity; }
+        0%, 100% { opacity: $start_opacity; }
+        50% { opacity: $mid_opacity; }
     }
 }
 
 
 ///
-/// Flash Fade In and Out
+/// Flash Fade Animation
+/// ---------------------------------------------------------------------------
 /// Creates a flash fade effect that smoothly transitions in and out of view.
-/// 
+///
 /// @name animate_flash_fade
-/// @param {Number|String} $duration [2s] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Time} $duration [2s] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Usage
+///   .notification {
+///     @include animate_flash_fade;
+///   }
 ///
 @mixin animate_flash_fade(
     $duration: 2s,
@@ -95,12 +103,18 @@
 
 ///
 /// Strobe Flash Animation
+/// ---------------------------------------------------------------------------
 /// Creates a strobe flash effect with a configurable frequency.
-/// 
+///
 /// @name animate_flash_strobe
-/// @param {Number|String} $frequency [0.1s] - The frequency of the strobe effect.
-/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [steps(1, end)] - The timing function to use for the animation.
+/// @param {Time} $frequency [0.1s] - Frequency of the strobe effect
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [steps(1, end)] - Timing function
+///
+/// @example scss - Usage
+///   .warning {
+///     @include animate_flash_strobe;
+///   }
 ///
 @mixin animate_flash_strobe(
     $frequency: 0.1s,
@@ -122,13 +136,18 @@
 
 
 ///
-/// Slow Fade Flash
+/// Slow Fade Flash Animation
 /// ---------------------------------------------------------------------------
 /// Creates a slow fading flash effect, fading in and out of view.
-/// 
+///
 /// @name animate_flash_fade_slow
-/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function to use for the animation.
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+///
+/// @example scss - Usage
+///   .gentle-pulse {
+///     @include animate_flash_fade_slow;
+///   }
 ///
 @mixin animate_flash_fade_slow(
     $duration: $animate_base_duration_slow,
@@ -148,30 +167,3 @@
 
 
 
-
-
-// @-webkit-keyframes flash {
-//     from, 50%, 100% {
-//       opacity: 1;
-//     }
-  
-//     25%, 75% {
-//       opacity: 0;
-//     }
-//   }
-  
-//   @keyframes flash {
-//     from, 50%, 100% {
-//       opacity: 1;
-//     }
-  
-//     25%, 75% {
-//       opacity: 0;
-//     }
-//   }
-  
-//   .flash {
-//     -webkit-animation-name: flash;
-//     animation-name: flash;
-//   }
-