move.gl 0.0.1

package/scss/mixins/animations/_beat.scss

@@ -0,0 +1,119 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Beat Animations Mixin Module
+/// ===========================================================================
+/// This module provides a set of SCSS mixins for creating various beat
+/// animations, including basic beat, beat with fade, and double beat effects.
+/// These mixins are designed to scale elements up and down in rhythmic
+/// patterns, enhancing the visual dynamics of your designs.
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Beat Animation
+/// Creates a beat animation that scales an element up and down rhythmically.
+///
+/// @name animate_beat
+/// @param {Number} $scale [$animate-scale-beat] - The scale factor for the beat animation.
+/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
+/// @param {String} $timing_function [$animate-base-timing-function] - 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_beat(
+    $scale: $animate-scale-beat, 
+    $duration: $animate-base-duration,
+    $timing_function: $animate-base-timing-function, 
+    $iteration_count: $animate-base-iteration-count
+) {
+    @include animate_base(
+        animate_beat,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_beat($scale);
+}
+
+///
+/// Beat Fade Animation
+/// Combines a beat animation with a fade effect, scaling the element while
+/// changing its opacity.
+///
+/// @name animate_beat_fade
+/// @param {Number} $opacity [$animate-opacity-fade] - The opacity level at the start and end of the animation.
+/// @param {Number} $scale [$animate-scale-beat-fade] - The scale factor for the beat animation.
+/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
+/// @param {String} $timing_function [$animate-base-timing-function-fade] - 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_beat_fade(
+    $opacity: $animate-opacity-fade, 
+    $scale: $animate-scale-beat-fade, 
+    $duration: $animate-base-duration,
+    $timing_function: $animate-base-timing-function-fade, 
+    $iteration_count: $animate-base-iteration-count
+) {
+    @include animate_base(
+        animate_beat_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @include keyframes_animate_beat_fade($opacity, $scale);
+}
+
+///
+/// Double Beat Animation
+/// Creates a double beat animation where the element scales down, then up,
+/// then down again, simulating a heartbeat or pulsating effect.
+///
+/// @name animate_beat_double
+/// @param {Number} $scale-small [$animate-scale-beat-double-small] - The smaller scale factor for the double beat animation.
+/// @param {Number} $scale-large [$animate-scale-beat-double-large] - The larger scale factor for the double beat animation.
+/// @param {Number|String} $duration [$animate-base-duration] - The duration of the animation.
+/// @param {String} $timing_function [$animate-base-timing-function] - 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_beat_double(
+    $scale-small: $animate-scale-beat-double-small,
+    $scale-large: $animate-scale-beat-double-large,
+    $duration: $animate-base-duration,
+    $timing_function: $animate-base-timing-function,
+    $iteration_count: $animate-base-iteration-count
+) {
+    @include animate_base(
+        animate_beat_double,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_animate_beat_double($scale-small, $scale-large);
+}

package/scss/mixins/animations/_blink.scss

@@ -0,0 +1,151 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Blink Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Blink Animation
+/// Creates a blink animation where the element alternates between visible and
+/// invisible states.
+/// 
+/// @name animate_blink
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the blink animation.
+/// @param {String} $timing_function [step-end] - The timing function for the blink animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number} $start_opacity [1] - The opacity of the element at the start and end of the animation.
+/// @param {Number} $blink_opacity [0] - The opacity of the element during the blink.
+///
+@mixin animate_blink(
+    $duration: $animate_base_duration,
+    $timing_function: step-end, 
+    $iteration_count: $animate_base_iteration_count,
+    $start_opacity: 1,
+    $blink_opacity: 0
+) {
+    @include animate_base(
+        animate_blink,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_blink {
+        0%, 100% { opacity: $start-opacity; }
+        50% { opacity: $blink-opacity; }
+    }
+}
+
+
+///
+/// Rapid Blink Animation
+/// Creates a rapid blink animation where the element blinks quickly between
+/// visible and invisible states.
+/// 
+/// @name animate_blink_rapid
+/// @param {Number|String} $duration [$animate_base_duration_fast] - The duration of the rapid blink animation.
+/// @param {String} $timing_function [steps(2, end)] - The timing function for the rapid blink animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_blink_rapid(
+    $duration: $animate_base_duration_fast,
+    $timing_function: steps(2, end),
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_blink_rapid,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_blink_rapid {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+    }
+}
+
+
+///
+/// Soft Blink Animation
+/// Creates a soft blink animation with a smooth transition in and out of
+/// visibility.
+/// 
+/// @name animate_blink_soft
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the soft blink animation.
+/// @param {String} $timing_function [ease-in-out] - The timing function for the soft blink animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_blink_soft(
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_blink_soft,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_blink_soft {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.3; }
+    }
+}
+
+
+///
+/// Alternating Blink Animation
+/// Creates an alternating blink animation where the element blinks at regular
+/// intervals.
+/// 
+/// @name animate_blink_alternate
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the alternating blink animation.
+/// @param {String} $timing_function [linear] - The timing function for the alternating blink animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_blink_alternate(
+    $duration: $animate_base_duration,
+    $timing_function: linear,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_blink_alternate,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_blink_alternate {
+        0%, 100% { opacity: 1; }
+        25%, 75% { opacity: 0; }
+    }
+}

package/scss/mixins/animations/_bounce.scss

@@ -0,0 +1,192 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Bounce Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Bounce Animation
+/// Creates a simple bounce animation where the element moves up and down.
+/// 
+/// @name animate_bounce
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
+/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number|String} $bounce_height [-20%] - The height of the bounce.
+///
+@mixin animate_bounce(
+    $duration: $animate_base_duration,
+    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
+    $iteration_count: $animate_base_iteration_count,
+    $bounce_height: -20%
+) {
+    @include animate_base(
+        animate_bounce,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @keyframes animate_bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY($bounce_height); }
+    }
+}
+
+
+
+// @keyframes bounce {
+// 	0%,100% {
+// 		-webkit-transform: translate3d(0,-30px,0);
+// 		transform: translate3d(0,-30px,0);
+// 	}
+// 	50% {
+// 		-webkit-transform: translate3d(0,-4px,0);
+// 		transform: translate3d(0,-4px,0);
+// 	}
+// }
+
+
+///
+/// Extended Bounce Animation
+/// Creates an extended bounce animation with multiple stages of scaling
+/// and bouncing.
+/// 
+/// @name animate_bounce_extended
+/// @param {Number} $start-scale_x [1.1] - Initial scale in the X direction.
+/// @param {Number} $start-scale_y [0.9] - Initial scale in the Y direction.
+/// @param {Number} $jump_scale_x [0.9] - Scale in the X direction during the jump.
+/// @param {Number} $jump_scale_y [1.1] - Scale in the Y direction during the jump.
+/// @param {Number|String} $bounce_height [-0.5em] - The height of the bounce.
+/// @param {Number} $land_scale_x [1.05] - Scale in the X direction upon landing.
+/// @param {Number} $land_scale_y [0.95] - Scale in the Y direction upon landing.
+/// @param {Number|String} $rebound_height [-0.125em] - The height of the rebound.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
+/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_bounce_extended(
+    $start-scale_x: 1.1,
+    $start-scale_y: 0.9,
+    $jump_scale_x: 0.9,
+    $jump_scale_y: 1.1,
+    $bounce_height: -0.5em,
+    $land_scale_x: 1.05,
+    $land_scale_y: 0.95,
+    $rebound_height: -0.125em,
+    $duration: $animate_base_duration,
+    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_bounce,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_bounce {
+        0%   { transform: scale(1,1) translateY(0); }
+        10%  { transform: scale($start-scale_x, $start-scale_y) translateY(0); }
+        30%  { transform: scale($jump_scale_x, $jump_scale_y) translateY($bounce_height); }
+        50%  { transform: scale($land_scale_x, $land_scale_y) translateY(0); }
+        57%  { transform: scale(1,1) translateY($rebound_height); }
+        64%  { transform: scale(1,1) translateY(0); }
+        100% { transform: scale(1,1) translateY(0); }
+    }
+}
+
+
+
+///
+/// Bounce with Rotation Animation
+/// Creates a bounce animation that includes a rotation as the element moves
+/// up and down.
+/// 
+/// @name animate_bounce_rotate
+/// @param {Number|String} $rotation_angle [360deg] - The angle of rotation during the bounce.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
+/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_bounce_rotate(
+    $rotation_angle: 360deg,
+    $duration: $animate_base_duration,
+    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_bounce_rotate,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_bounce_rotate {
+        0%, 100% { transform: translateY(0) rotate(0); }
+        50% { transform: translateY(-20%) rotate($rotation_angle); }
+    }
+}
+
+
+
+///
+/// Multi-Directional Bounce Animation
+/// Creates a bounce animation that moves the element in multiple
+/// directions (X and Y).
+/// 
+/// @name animate_bounce_multi
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the bounce animation.
+/// @param {String} $timing_function [cubic-bezier(0.280, 0.840, 0.420, 1)] - The timing function for the bounce animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number|String} $bounce_x [-10%] - The distance the element moves along the X-axis during the bounce.
+/// @param {Number|String} $bounce_y [-20%] - The distance the element moves along the Y-axis during the bounce.
+///
+@mixin animate_bounce_multi(
+    $duration: $animate_base_duration,
+    $timing_function: cubic-bezier(0.280, 0.840, 0.420, 1),
+    $iteration_count: $animate_base_iteration_count,
+    $bounce_x: -10%,
+    $bounce_y: -20%
+) {
+    @include animate_base(
+        animate_bounce_multi,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_bounce_multi {
+        0%, 100% { transform: translate(0, 0); }
+        25% { transform: translate($bounce_x, 0); }
+        50% { transform: translate(0, $bounce_y); }
+        75% { transform: translate($bounce_x, 0); }
+    }
+}

package/scss/mixins/animations/_elastic.scss

@@ -0,0 +1,65 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Elastic Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Elastic Animation
+/// Creates an elastic animation where the element scales up and down in a spring-like motion.
+/// @name animate_elastic
+/// @param {Number} $scale-start [0.5] - The starting scale of the element.
+/// @param {Number} $scale-end [1.25] - The scale of the element at the midpoint of the animation.
+/// @param {Number|String} $duration [$animate_base_duration_slow] - The duration of the elastic animation.
+/// @param {String} $timing_function [cubic-bezier(0.68, -0.55, 0.27, 1.55)] - The timing function for the elastic animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+///
+@mixin animate_elastic(
+    $scale-start: 0.5, 
+    $scale-end: 1.25, 
+    $duration: $animate_base_duration_slow,
+    $timing_function: cubic-bezier(0.68, -0.55, 0.27, 1.55), 
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_elastic,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_elastic {
+        0%, 100% { transform: scale($scale-start); }
+        50% { transform: scale($scale-end); }
+    }
+}

package/scss/mixins/animations/_fade.scss

@@ -0,0 +1,154 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Fade Animations Mixin Module
+/// ===========================================================================
+/// 
+/// This module ...
+/// 
+/// 
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../keyframes" as *;
+@use "base" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+@mixin animate_fade(
+    $start_opacity: 1,
+    $mid_opacity: 0,
+    $end_opacity: 1,
+    $duration: $animate_base_duration,
+    $timing_function: cubic-bezier(.4, 0, .6, 1),
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_fade,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_fade {
+        0%, 100% { opacity: $start-opacity; }
+        50% { opacity: $mid-opacity; }
+    }
+}
+
+
+@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
+    );
+    @keyframes animate_fade_in {
+        from { opacity: $start-opacity; }
+        to { opacity: $end-opacity; }
+    }
+}
+
+
+// @keyframes fadeIn {
+//     from {
+//       opacity: 0;
+//       transform: translate3d(0, -100%, 0);
+//     }
+  
+//     to {
+//       opacity: 1;
+//       transform: none;
+//     }
+//   }
+
+// $boot-fadein-time: 2s;
+// $boot-fadein-opacity-start: 0;
+// $boot-fadein-opacity-end: 1;
+
+//   .fade {
+//     @include transition($transition-fade);
+  
+//     &:not(.show) {
+//         opacity: 0;
+//     }
+// }
+  
+
+// Fade Out Animation
+// ----------------------------------------------------------------------------
+
+@mixin animate_fade_out(
+    $start_opacity: 1,
+    $end_opacity: 0,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_fade_in,
+        $duration,
+        $timing_function,
+        1
+    );
+    @keyframes animate_fade_out {
+        from { opacity: $start-opacity; }
+        to { opacity: $end-opacity; }
+    }
+}
+
+
+// @keyframes fadeOut {
+//     from {
+//       opacity: 1;
+//     }
+  
+//     to {
+//          transform: translate3d(0, -100%, 0);
+//       opacity: 0;
+//     }
+//   }
+
+
+@mixin animate_fade_gradual(
+    $start_opacity: 1,
+    $end_opacity: 0.5,
+    $duration: $animate_base_duration_slow,
+    $timing_function: ease-in-out,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_fade_gradual,
+        $duration,
+        $timing_function,
+        $iteration_count,
+    );
+    @keyframes animate_fade_gradual {
+        0%, 100% { opacity: $start-opacity; }
+        50% { opacity: $end-opacity; }
+    }
+}